web-dev-qa-db-de.com

Bootstrap Accordion button "Data-Parent" umschalten funktioniert nicht

Ich versuche, ein Akkordeon mit Bootstrap 3 zu erstellen, wobei der mit dem Datenattribut reduzierbare Button ohne das Akkordeon-Markup verwendet wird. Es sieht für mich einfach sauberer aus. 

Ich kann jedoch das data-parent -Attribut nicht zum Laufen bringen. Ich möchte beim Eröffnen einer Frage alle anderen schließen. Ich lese die Dokumente ( http://getbootstrap.com/javascript/#collapse-usage ), kann es aber immer noch nicht zum Laufen bringen.

Ich verwende den folgenden Code:

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

Hier ist das JSFiddle: http://jsfiddle.net/twinsen/AEew4/

Ich bin sehr glücklich, wenn mir jemand zeigt, wo ich einen Fehler mache: \

html5twitter-bootstrapaccordiontwitter-bootstrap-3
53
Ziik

Bootstrap 4

Verwenden Sie das data-parent=""-Attribut für das collapse-Element (anstelle des Trigger-Elements).

<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

Diese Ausgabe finden Sie auf GitHub: https://github.com/twbs/bootstrap/issues/10966

Es gibt einen "Fehler", der das Akkordeon von der Klasse .panel abhängig macht, wenn das Attribut data-parent verwendet wird. Um dies zu umgehen, können Sie jede Akkordeongruppe in einem 'Panel'-Divis ..

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>

Bearbeiten

Wie in den Kommentaren erwähnt, muss jeder Abschnitt kein .panel sein. Jedoch...

  • .panel muss ein direktes untergeordnetes Element des als data-parent= verwendeten Elements sein.
  • jeder Akkordeonabschnitt (data-toggle=) muss ein direktes Kind des .panel sein ( http://www.bootply.com/AbiRW7BdD6# )
124
Zim

Beachten Sie, dass nicht nur eine Abhängigkeit von .panel besteht, sondern auch von der DOM-Struktur.

Stellen Sie sicher, dass Ihre Elemente folgendermaßen strukturiert sind:

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

Es ist im Grunde das, was @ Blazemonger gesagt hat, aber ich denke, auch die Hierarchie des Zielelements ist wichtig. Ich habe nicht alle Möglichkeiten ausprobiert, aber im Grunde sollte es funktionieren, wenn Sie dieser Hierarchie folgen.

Zu Ihrer Information, ich hatte mehr Ebenen zwischen dem Steuerelement div & content div und das hat nicht funktioniert.

13
jtlai

Versuche dies. Einfache Lösung ohne Abhängigkeiten.

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

10
Melih

Wie Blazemonger sagte, müssen #parent, .panel und .collapse direkte Nachkommen sein. Wenn Sie Ihre HTML-Datei jedoch nicht ändern können, können Sie eine Problemumgehung mit Bootstrap-Ereignissen und -Methoden mit dem folgenden Code ausführen:

$('#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
Krzysztof Grzybek

Hier ist ein (hoffentlich) universeller Patch, den ich entwickelt habe, um dieses Problem für BootStrap V3 zu beheben. Keine besonderen Anforderungen außer dem Einfügen des Skripts.

$(':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: Nachfolgend finden Sie eine vereinfachte Antwort, die immer noch meinen Bedürfnissen entspricht. Ich verwende jetzt einen delegierten Klick-Handler:

$(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');
});
2
craigrs84

Wenn diese Änderung an Krzysztofs Antwort gefunden wurde, half mein Problem

$('#' + 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');                
    })
})

wenn Sie über verschachtelte Panels verfügen, müssen Sie möglicherweise auch angeben, welche Panels verwendet werden sollen, indem Sie einen anderen Klassennamen hinzufügen, um zwischen ihnen zu unterscheiden, und diesen in den Selektor im obigen JavaScript einfügen 

2
kernowcode

Das gleiche Problem hatte ich beim Umschalten des Akkordeons. Aber wenn ich versuche, den Skriptblock in den Kopfblock zu setzen, funktioniert das für meinen Fall !!

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