web-dev-qa-db-fra.com

Lier à l’événement Réduire sur Twitter Bootstrap 3

En supposant que j'ai un 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>

Avec quel élément dois-je me lier pour les éléments suivants JavaScript :

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

Est-il possible de lier tous les panneaux par classe?

Malheureusement il n'y a pas #myCollapsible dans l'exemple de la documentation .

twitter-bootstraptwitter-bootstrap-3
48
Diolor

Lorsque la documentation répertorie les événements disponibles , c'est simplement une promesse qu'il soulèvera toujours chaque événement particulier à un moment donné.

Par exemple, hidden.bs.collapse sera soulevé chaque fois que:

un élément réduit a été caché à l'utilisateur.

Que quelqu'un écoute ou non cet événement n'est pas encore entré en jeu.

Pour tirer parti de cet événement ou de tout autre événement, nous pouvons utiliser la méthode .on() _ (=== -)) de jQuery sur des éléments HTML particuliers pour voir s'ils soulèvent des événements particuliers.

L'emplacement de l'auditeur dépend de l'endroit où l'événement sera déclenché et du moment où nous voulons le capturer.

Exemple simple:

Supposons que vous ayez la structure de base [~ # ~] html [~ # ~] d'un contrôle accordéon:

<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>

Dans ce cas, chaque classe panel va déclencher cet événement. Donc, si vous voulez le capturer ici, nous utilisons simplement le sélecteur de classe jQuery pour attacher des auditeurs à tous les objets .panel Comme ceci:

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

jsFiddle

Mais attendez il y a plus ...

Dans [~ # ~] html [~ # ~], les événements déboucheront de l'élément élément le plus interne sur l'élément le plus externe s'ils ne sont pas gérés. Ainsi, les événements générés pour chaque individu .panel Peuvent également être gérés par l'ensemble de l'élément .panel-group (ou même par l'élément body au fur et à mesure de leur progression. là).

Dans la page d'exemples bootstrap), ils utilisent le sélecteur d'identifiant pour l'ensemble de panel-group, Qui se trouve être #myCollapsible, Mais dans notre cas, il s'agit de #accordion. Si nous voulons gérer l'événement ici, nous pouvons simplement changer le sélecteur jQuery comme suit:

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

Désolé de répondre à une question aussi ancienne, mais j'espère sincèrement que ma contribution aidera quelqu'un d'autre.

J'ai trouvé cette question parce que j'avais besoin de savoir comment obtenir le id du .panel qui était sujet à l’événement qui se déclenchait.

@KyleMit était très proche de la réponse dont j'avais besoin mais pas tout à fait.

Cette:

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

ne déclenche pas le alert

Cette:

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

déclenche l'alerte avec is#accordion que nous n’avons pas besoin d’obtenir car nous le savons déjà pour lier le #accordion à la première place.

Donc, pour obtenir le id du .panel élément en cours de masquage, vous utiliseriez e.target.id au lieu de e.currentTarget.id. Comme ça:

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

La classe collapse de Bootstrap expose quelques événements à connecter à la fonctionnalité de réduction:

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

3
MrCADman