Bootstrap bouton Accordéon bascule "data-parent" ne fonctionne pas

j'essaie de créer un accordéon en utilisant Bootstrap 3 en utilisant le bouton repliable avec l'attribut data, sans le markup accordéon. Il a juste l'air plus propre pour moi.

cependant je ne peux pas faire l'attribut data-parent travailler. Je veux qu'en ouvrant une question, tous les autres ferment. Je lis le docs ( ) http://getbootstrap.com/javascript/#collapse-usage ) mais ne peut toujours pas le faire fonctionner.

j'utilise le code suivant: 

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

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

je serais très heureux si quelqu'un me montre où je fais une erreur:

49
demandé sur Zim 2013-10-17 15:13:50

7 réponses

Bootstrap 4

utiliser l'attribut data-parent="" sur l'élément collapsus (au lieu de l'élément déclencheur) 

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5>
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          Collapsible #1 trigger
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Collapsible #1 element
      </div>
    </div>
  </div>
  ... (more cards/collapsibles inside #accordion parent)
</div>

Bootstrap 3

voir ce numéro 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 lorsqu'on utilise l'attribut data-parent . Pour contourner cela, vous pouvez envelopper chaque groupe d'accordéon dans un div' panel'..

http://bootply.com/88288 

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

Modifier

, Comme mentionné dans les commentaires, chaque section n'a pas à être un .panel . Cependant...

117
répondu Zim 2018-03-09 20:06:13

Note, non seulement il y a une dépendance .en outre, elle dépend de la structure du DOM.

assurez-vous que vos éléments sont structurés comme ceci: 

    <div id="parent-id">
        <div class="panel">
            <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
                <div id="opt1" class="collapse">
...

c'est essentiellement ce que @Blazemonger a dit, Mais je pense que la hiérarchie de l'élément cible compte aussi. Je n'ai pas fini d'essayer toutes les possibilités, mais ça devrait marcher si vous suivez cette hiérarchie.

POUR INFO, j'avais plus de couches entre le contrôle div & content div Et ça n'a pas marché.

13
répondu jtlai 2013-11-30 04:55:37

essayez ceci. Solution Simple sans dépendances. 

$('[data-toggle="collapse"]').click(function() {
  $('.collapse.in').collapse('hide')
});
9
répondu Melih 2017-03-01 15:02:51

comme disait Blazemonger, # parent,.panneau et .l'effondrement doit être une descendance directe. Cependant, si vous ne pouvez pas changer votre html, vous pouvez contourner en utilisant des événements bootstrap et des méthodes 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');
    })
})
8
répondu Krzysztof Grzybek 2015-12-15 09:32:46

si trouvé cette modification à Krzysztof réponse aidé mon numéro 

$('#' + 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 imbriqués, vous pouvez aussi avoir besoin de spécifier lesquels en ajoutant un autre nom de classe pour les distinguer et ajouter ceci au sélecteur a dans le JavaScript ci-dessus

2
répondu kernowcode 2016-04-26 09:23:09

voici un patch universel (espérons-le) que j'ai développé pour corriger ce problème pour BootStrap V3. Aucune exigence particulière autre que le branchement dans le 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');
    });
});

EDIT: ci-dessous est une réponse simplifiée qui répond toujours à mes besoins, et j'utilise maintenant un gestionnaire de clic délégué: 

$(document.body).on('click', ':not(.panel) > [data-toggle="collapse"][data-parent]', function() {
    var parent = $(this).data('parent');
    var target = $(this).data('target') || $(this).prop('hash');
    $(parent).find('.collapse.in').not(target).collapse('hide');
});
1
répondu craigrs84 2018-09-12 20:27:16

j'ai eu le même problème avec l'accordéon. Mais quand j'essaie de mettre le bloc script dans le bloc en-tête, ça marche pour mon cas!! 

<head>   
...   
<link rel="stylesheet" href="../assets/css/bootstrap.css" />       
<script src="../assets/js/jquery-1.9.1.min.js" ></script>   
<script src="../assets/js/bootstrap.js" ></script> 
</head>
0
répondu Enix 2014-10-21 20:07:13