Twitter Bootstrap akordeón skupina položky bez obsahu - twitter-bootstrap

Snažím sa urobiť akordeón iba s niekoľkými položkami, ktoré sa rozširujú o podradené prvky a 2 položkami, ktoré neobsahujú podriadené prvky, ktoré by zatvorili všetko, čo je otvorené.

mám tu je nastavenie

Môžete vidieť na položke # 3 je obsah v.harmonika-vnútorná div, ale ja to nechcem zobrazovať. Tiež uvidíte, že v položke č. 4 sa nenachádza žiadny vnútorný akordeón #collapseFour, ktorý úplne poruší akordeón.

Otázka 1: Je to možné pomocou akordeónu služby Twitter Bootstrap?

Otázka 2: Existuje lepší spôsob, ako ísť týmto procesom?

kód:

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

odpovede:

2 pre odpoveď č. 1

jsFiddle Verím, že to je presne to, čo hľadáte.

jednoducho ich skryte pomocou správnych funkcií.

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

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

---

0 pre odpoveď č. 2

Ak vám nebude vadiť, že po kliknutí naň skolabuje ostatné oblasti, môžete zo značky odstrániť iba prvok href = "# collapseThree".

---

0 pre odpoveď č. 3

Riešenie iné ako JQS

Vyskúšajte tento aktualizovaný kód here.

Vnútorná tretia akordeón sa po kliknutí nerozbalí. A zobrazený akordeón-vnútorný sa zrúti.

---

0 pre odpoveď č. 4

Čo sa týka tohto, pridal som atribút, ktorý odkazom povie, aby zavreli všetky otvorené karty a použili túto funkciu jQuery:

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

To vám poskytne pekný efekt prepínania snímok.

Vypadni na husle

---