Bindung an Collapse-Ereignis in Twitter Bootstrap 3

Davon aus, dass ich eine Bootstrap-Collapse:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Welches element sollte ich die Bindung für die folgenden JavaScript:

$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})

Ist es möglich, zu binden alle PANEELEN, die durch die Klasse?

Leider gibt es keine #myCollapsible im Beispiel in der Dokumentation.

InformationsquelleAutor der Frage Diolor | 2013-11-12

  1. 75

    Wenn die Dokumentation listet die "Veranstaltungen, es ist nur ein Versprechen, dass es auch immer erhöhen jeder bestimmtes Ereignis zu einem bestimmten Zeitpunkt.

    Zum Beispiel, hidden.bs.collapse wird ausgelöst, wenn:

    ein ausgeblendetes element wurde vom Benutzer ausgeblendet.

    Ob oder nicht jeder hören, dass die Veranstaltung noch nicht ins Spiel kommen.

    Nutzung dieser oder irgendwelcher anderen Fall können wir die Nutzung von jQuery .auf() Methode attach Listener auf bestimmte html-Elemente zu sehen, wenn Sie heben bestimmte Ereignisse.

    Wo wir fügen Sie der listener hängt davon ab, wo das Ereignis wird ausgelöst, und wenn wir wollen, um es einzufangen.

    Einfaches Beispiel:

    Lassen Sie uns sagen, Sie haben die grundlegenden HTML Struktur für ein Akkordeon-control:

    <div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1"><!--...--></div>
  <div class="panel panel-default" id="panel2"><!--...--></div>
  <div class="panel panel-default" id="panel3"><!--...--></div>
</div>

    In diesem Fall, jeder panel Klasse wird dieses Ereignis ausgelöst. Also, wenn Sie wollen, um es zu erfassen es, wir nutzen Sie einfach die jQuery-Klasse-Selektor befestigen Sie die Zuhörer auf alle .panel Objekte wie so:

    $('.panel').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

    jsFiddle

    Aber Warten Sie, Es gibt noch Mehr...

    In HTML events Blase aus der innerste element, um die äußerste element wenn nicht behandelte. Also Ereignisse, die für jeden einzelnen .panel, können auch behandelt werden, indem die gesamte .panel-group (oder sogar die body element wie werden Sie schließlich arbeiten Sie Ihren Weg nach oben).

    In der bootstrap Beispiele-Seite, Sie sind mit dem id-Selektor für das gesamte panel-group,, die passiert werden #myCollapsible, aber in unserem Fall ist #accordion. Wenn wir wollen, auf das Ereignis zu behandeln es, wir können ändern Sie einfach die jQuery-Selektor wie folgt:

    $('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

    InformationsquelleAutor der Antwort KyleMit

  2. 11

    Sorry für die Beantwortung solch eine alte Frage, aber ich hoffe meine Eingabe hilft jemand anderes.

    Fand ich diese Frage, weil ich brauchte, um zu wissen, wie man die id des .panel das war Gegenstand der Veranstaltung, die Sie abfeuern.

    @KyleMit war sehr nahe an der Antwort, die ich brauchte, aber nicht ganz.

    :

    $('.panel').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

    nicht Feuer die alert

    :

    $('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

    feuert die Warnung mit is #accordion die wir nicht brauchen, zu bekommen, weil wir bereits wissen, zu binden, das #accordion in den ersten Platz.

    So um die id des .panel element wird versteckt, die Sie verwenden würden e.target.id statt e.currentTarget.id. Wie diese:

    $('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.target.id);
})

    InformationsquelleAutor der Antwort Leon Francis Shelhamer

  3. 3

    Bootstrap-Kollaps-Klasse stellt ein paar Ereignisse, zum Einhängen in den Kollaps Funktionalität:

    https://getbootstrap.com/docs/3.3/javascript/#collapse-events

    InformationsquelleAutor der Antwort MrCADman

Schreibe einen Kommentar