Bootstrap Accordéon bouton permet de basculer «data-parent» ne fonctionnant pas

J’essaie de créer un accordéon en utilisant Bootstrap 3 en utilisant le bouton réductible avec l’atsortingbut data, sans le balisage accordéon. Cela me semble plus propre.

Cependant, je ne peux pas faire en sorte que l’atsortingbut data-parent fonctionne. Je veux en ouvrant une question, tous les autres à fermer. Je lis les docs ( http://getbootstrap.com/javascript/#collapse-usage ) mais je n’arrive toujours pas à le faire fonctionner.

J’utilise le code suivant:

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.

Voici le JSFiddle: http://jsfiddle.net/twinsen/AEew4/

Je serai très heureux si quelqu’un me montre où je me trompe: \

Bootstrap 4

Utilisez l’atsortingbut data-parent="" sur l’élément de réduction (au lieu de l’élément déclencheur)

 
Collapsible #1 element
... (more cards/collapsibles inside #accordion parent)

Bootstrap 3

Voir ce problème sur GitHub: https://github.com/twbs/bootstrap/issues/10966

Il y a un “bug” qui rend l’accordéon dépendant de la classe .panel lors de l’utilisation de l’atsortingbut data-parent . Pour le contourner, vous pouvez envelopper chaque groupe d’accordéon dans un div “panneau”.

http://bootply.com/88288

 
..
..
...

modifier

Comme mentionné dans les commentaires, chaque section ne doit pas nécessairement être un .panel . Toutefois…

  • .panel doit être un enfant direct de l’élément utilisé comme data-parent=
  • chaque section d’accordéon ( data-toggle= ) doit être un enfant direct de .panel ( http://www.bootply.com/AbiRW7BdD6# )

Notez que non seulement il y a une dépendance à .panel, mais aussi une dépendance à la structure DOM.

Assurez-vous que vos éléments sont structurés comme suit:

  
Control
...

C’est essentiellement ce que @Blazemonger a dit, mais je pense que la hiérarchie de l’élément cible est également importante. Je n’ai pas fini d’essayer toutes les possibilités, mais en gros, cela devrait fonctionner si vous suivez cette hiérarchie.

Pour info, j’avais plus de couches entre le div div & content et ça ne marchait pas.

Essaye ça. Solution simple sans dépendances.

 $('[data-toggle="collapse"]').click(function() { $('.collapse.in').collapse('hide') }); 

Comme l’a dit Blazemonger, #parent, .panel et .collapse doivent être des descendants directs. Toutefois, si vous ne pouvez pas modifier votre code HTML, vous pouvez résoudre le problème en utilisant les méthodes et les événements de démarrage avec le code suivant:

 $('#your-parent .collapse').on('show.bs.collapse', function (e) { var actives = $('#your-parent').find('.in, .collapsing'); actives.each( function (index, element) { $(element).collapse('hide'); }) }) 

Si trouvé cette modification à la réponse Krzysztof a aidé mon problème

 $('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) { var all = $('#' + parentId).find('.collapse'); var actives = $('#' + parentId).find('.in, .collapsing'); all.each(function (index, element) { $(element).collapse('hide'); }) actives.each(function (index, element) { $(element).collapse('show'); }) }) 

Si vous avez des panneaux nesteds, vous devrez peut-être également spécifier lesquels en ajoutant un autre nom de classe pour les distinguer et l’append au sélecteur dans le code JavaScript ci-dessus.

Voici un patch universel (espérons-le) que j’ai développé pour résoudre ce problème pour BootStrap V3. Aucune exigence particulière autre que le twigment du script.

 $(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() { var parent = $(this).data('parent'); var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this); items.each(function() { var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1]; $(target).filter('.in').collapse('hide'); }); }); 

J’ai eu le même problème en basculant l’accordéon. Mais quand j’essaye de mettre le bloc de script dans le bloc d’en-tête, cela fonctionne pour mon cas !!

  ...