Twitter Bootstrap 2 auf Zusammenbruch event

gibt es eine Möglichkeit, zu fangen, wenn der Zusammenbruch Menü angezeigt wird (oder wenn der minimieren-Schaltfläche geklickt wird, durch Benutzer) ?

ich bin mit der standard-bootstrap twitter Frameworks und Klassen.

Sie fangen wollen, der Zusammenbruch Ereignis auf das gesamte Dokument oder nur ein Abschnitt/Menü?

InformationsquelleAutor itsme | 2012-05-17

  1. 2

    TWITTER BOOTSTRAP 2

    Sieht es so aus das plugin ist das hinzufügen der Klasse "in" den aktiven Zusammenbruch der Gruppe. Vielleicht könnten Sie so etwas machen.

    if( $('#collapseOne').hasClass('in') ){
..do something
}

    EDIT:

    Okay, ich weiß nicht, habe sowieso jetzt testen, also sind diese Art der nur Vermutungen. Ich bin sicher, Sie könnten leicht feststellen, wenn ein Zusammenbruch der link angeklickt wurde, dies zu tun.

    $('.accordion-toggle').click(function(){
   console.log('clicked');
});

    Allerdings, wenn Sie wollte genau wissen, welche geklickt wurde, würden Sie wahrscheinlich haben, um zu indizieren.

    uhm nicht funktioniert ..
    das wird nicht funktionieren, in Bootstrap 3.0
    BS 3.0 hat vier Veranstaltungen show.bs.collapse, shown.bs.collapse, hide.bs.collapse und hidden.bs.collapse

    InformationsquelleAutor Kris Hollenbeck

  2. 34

    In der bootstrap-3.x, der vier Veranstaltungen, die du suchst:

    show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

    Sie das Feuer auf die data-target DOM-element, z.B. für die folgenden mark-up:

    <div role="navigation" class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Title</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li id="item1"><a href="#item1">Menu Item 1</a></li>
      </ul>
    </div>
  </div>
</div>

    Ihnen hören würde (in jQuery) über:

    $('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); });
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });
    Danke, dass Sie das element wurde nicht klar in der Dokumentation.
    Dies sollte als "Antwort" gekennzeichnet...
    Der Fragesteller ist auf der Suche nach Hilfe mit Bootstrap 2, nicht 3

    InformationsquelleAutor patspam

  3. 9

    Verwenden Sie die "gezeigt" event-handler:

    $("#accordion").on("shown",function(event){
        collapse_element = event.target;
    });

    Finden Sie unter:
    http://twitter.github.com/bootstrap/javascript.html#collapse zu sehen, die anderen Veranstaltungen unterstützt

    Leider, obwohl ich erfolgreich, habe ein Akkordeon mit dieser Veranstaltung arbeiten, die in diesem Geige es scheint nicht arbeiten zu wollen, in Bootstrap 3.0, und der link ist nun gebrochen. Weiter auf der Suche...

    InformationsquelleAutor nic

  4. 3

    Wenn Sie verwenden möchten easing-animation mit dem ändern des symbols, das Sie tun müssen, um diese auf ein - /ausblenden.

    In diesem Beispiel verwende ich bootstrap 2.3.2, jQuery 1.8.3 und Font Awesome 3.2.1

    HTML:

    <div id="accordion" class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a data-item-id="{id}" href="#something" data-parent="#accordion"
         data-toggle="collapse" class="accordion-toggle">
       <i class="icon icon-expand-alt"></i> {title}</a>
     </div>
     <div data-item-id="{id}" class="accordion-body collapse" id="something">
       <div class="accordion-inner">
         {Content}
       </div>
     </div>
  </div>
 ... {additional panels}
</div>

    js:

    $('#accordion').on('show hide', function (e) {
  var oTarget = $(e.target);
  var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]'));
  oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200);
 });

    InformationsquelleAutor uberianmaan

Schreibe einen Kommentar