Twitter Bootstrap Akkordeon Gruppenartikel ohne Inhalt - twitter-bootstrap

Ich versuche, ein Akkordeon mit nur wenigen Elementen zu erstellen, die sich mit untergeordneten Elementen erweitern, und 2 Elementen, die keine untergeordneten Elemente enthalten, die alles schließen, was geöffnet ist.

Ich habe ein Geigen-Setup hier

Sie können auf Punkt 3 sehen, dass Inhalt in der Seite ist.Akkordeon-inneres div aber ich möchte das nicht angezeigt. Außerdem sehen Sie auf Artikel 4, dass #collapseFour kein .accordion-inneres enthält, das das Akkordeon vollständig bricht.

Frage 1: Ist das mit dem Twitter Bootstrap-Akkordeon möglich?

Frage 2: Gibt es einen besseren Weg, um diesen Prozess durchzugehen?

Code:

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
This is where i do not need child elements
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Collapsible Group Item #4
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">

</div>
</div>
</div>

Antworten:

2 für die Antwort № 1

jsFiddle Ich glaube, das ist genau das, wonach Sie suchen.

verstecken Sie sie einfach mit den richtigen Funktionen.

$("#collapseFour").on("show", function () {
$("#collapseFour").collapse("hide");
});

$("#collapseThree").on("show", function () {
$("#collapseThree").collapse("hide");
});

---

0 für die Antwort № 2

Wenn Sie nichts dagegen haben, dass die anderen Bereiche beim Klicken nicht minimiert werden, können Sie einfach das href = "# collapseThree" -Element aus dem Tag entfernen

---

0 für die Antwort № 3

Nicht-Jquery-Lösung

Probieren Sie diesen aktualisierten Code aus here.

Das dritte Akkordeon-Innenelement wird beim Klicken nicht erweitert. Und das gezeigte innere Akkordeon wird zusammenbrechen.

---

0 für die Antwort № 4

Wie auch immer, ich habe ein Attribut hinzugefügt, um den Links mitzuteilen, dass alle geöffneten Tabs geschlossen werden sollen, und diese jQuery-Funktion verwendet:

$("a[data-close]").click(function () {
$($(this).data("parent")).find(".in").collapse("toggle");
});

Dadurch erhalten Sie den schönen Slide-Toggle-Effekt.

Chek raus die Geige

---