Verschachtelte Akkordeon-Menü in jQuery
Frage
Ich habe ein Menü implementiert eine Reihe von verschachtelten Akkordeons mit, 1
und 2
, die jeweils mit den Elementen, a
und b
.
Ich mag die folgende Logik implementieren:
-
Wenn ich
1a
klicken, werde ich die Daten von1a
und zwei Untermenü2a
bekommen,2b
-
Wenn ich
2a
klicken,2b
Ich werde die Daten von jedem erhalten ist.
Das Problem
Gewünschtes Ergebnis:
- Ich will nur das
nth-most
Kind-Element für den letzten Klick angezeigt werden, alle anderen kollabieren. - Bei der Initialisierung nur
1a
und1b
sollte sichtbar sein.
Aktuelles Ergebnis:
- Durch Klicken auf
1b
, dann auf2b
ist1b
noch vollständig sichtbar.
JavaScript-Code
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
HTML:
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
</div>
<div>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
Lösung
Nur ein paar Änderungen an der Reihenfolge der Elemente in Ihrem HTML und Sie erhalten das Verhalten Sie suchen. Zu Beginn jetzt nur 1a und 1b sind offen. Ebenso, wenn Sie auf 1b klicken jetzt wird es 1a schließen, die auch alle geöffneten 2a / 2b Abschnitt verbergen.
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span></a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span></a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
</body>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow