html5 - horizontal - bootstrap collapse table




Bouton d'Accordéon Bootstrap bascule "data-parent" ne fonctionne pas (4)

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 effectuer une solution de contournement à l'aide d'événements et de méthodes bootstrap 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');
    })
})

J'essaie de créer un accordéon en utilisant Bootstrap 3 en utilisant le bouton pliable avec l'attribut de données, sans le balisage accordéon. Cela me semble plus propre.

Cependant, je ne peux pas faire fonctionner l'attribut data-parent . 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:

<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 serai très heureux si quelqu'un me pointe où je fais une erreur: \


Essaye ça. Solution simple sans dépendances.

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


Notez, non seulement il y a dépendance sur .panel, il a aussi une dépendance sur la structure 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 dit @Blazemonger, 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 fondamentalement cela devrait fonctionner si vous suivez cette hiérarchie.

Pour info, j'ai eu plus de couches entre le contrôle div & contenu div et cela n'a pas fonctionné.


Si trouvé cette modification à la réponse de 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 imbriqués, vous devrez peut-être aussi spécifier lesquels en ajoutant un autre nom de classe pour les distinguer et ajouter ceci à un sélecteur dans le JavaScript ci-dessus





twitter-bootstrap-3