Menú de acordeón anidado en jQuery
Tengo un menú implementado usando un conjunto de acordeones anidados,1
y2
, cada uno con elementos,a
yb
.
Me gustaría implementar la siguiente lógica:
Cuando hago clic1a
, Obtendré los datos de1a
y dos submenús2a
,2b
Cuando hago clic2a
, 2b
Obtendré los datos de cada uno, respectivamente.
El problema
Resultado deseado:
Solo quiero mostrar elnth-most
elemento secundario para el último clic, contrayendo todos los demás.Tras la inicialización, solo1a
y1b
debe ser visibleResultado actual:
Haciendo clic en1b
, luego en2b
, 1b
Todavía es completamente visible.Código 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>