Menu accordéon imbriqué dans jQuery
J'ai un menu en œuvre à l'aide d'un ensemble de imbriquée accordéons, 1
et 2
chacun avec des éléments, a
et b
.
J'aimerais implémenter la logique suivante:
- Lorsque je clique sur
1a
je vais obtenir les données de1a
et deux sous-menu2a
,2b
- Lorsque je clique sur
2a
2b
je vais obtenir les données de chacun, respectivement.
Le problème
Résultat souhaité:
- Je ne veux afficher le
nth-most
élément enfant pour le dernier clic, le regroupement de tous les autres. - Lors de l'initialisation, seulement
1a
et1b
doit être visible.
Résultat courant:
- Cliquant sur
1b
puis sur2b
1b
est encore bien visible.
Code JavaScript
$(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>
source d'informationauteur venkatachalam
Vous devez vous connecter pour publier un commentaire.
Quelques modifications à l'ordre des éléments dans votre code HTML et vous obtenir le comportement que vous recherchez. Au début maintenant seulement 1a et 1b sont ouverts. De même, lorsque vous cliquez sur 1b maintenant, il va fermer 1a qui permet de masquer tous les 2a/2b section.