Menu accordéon imbriqué dans jQuery
Question
J'ai un menu implémenté à l'aide d'un ensemble d'accordéons imbriqués, 1
et 2
, chacun avec des éléments, a
et b
.
Je voudrais implémenter la logique suivante:
-
Lorsque je clique sur
1a
, j'obtiens les données de2a
et deux sous-menus2b
,nth-most
.
-
Lorsque je clique sur
1b
, <=> je récupère les données de chacun, respectivement.
Le problème
Résultat souhaité:
- Je souhaite uniquement afficher l'élément <=> pour le dernier clic, en réduisant tous les autres.
- Lors de l'initialisation, seuls <=> et <=> doivent être visibles.
Résultat actuel:
- En cliquant sur <=>, puis sur <=>, <=> reste entièrement 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>
La solution
Quelques modifications dans l'ordre des éléments dans votre code HTML et vous obtenez le comportement que vous recherchez. Au début, seuls 1a et 1b sont ouverts. De même, lorsque vous cliquez sur 1b, il ferme maintenant 1a, ce qui masque également toute section ouverte 2a / 2b.
$(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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow