Всего несколько изменений в порядке элементов в вашем HTML, и вы получите поведение, которое вы ищете. На старте сейчас открыты только 1a и 1b. Точно так же, когда вы нажмете на 1b, он закроет 1a, что также скроет любой открытый раздел 2a / 2b.
я есть меню, реализованное с использованием набора вложенных аккордеонов,1 а также2каждый с элементами,a а такжеb.
Я хотел бы реализовать следующую логику:
Когда я нажимаю1aЯ получу данные1a и два подменю2a,2b
Когда я нажимаю2a, 2b Я получу данные каждого соответственно.
Проблема
Желаемый результат:
Я только хочу отобразитьnth-most дочерний элемент для последнего клика, сворачивая все остальные.Только при инициализации1a а также1b должно быть видноТекущий результат:
Нажав на1b, Затем на2b, 1b все еще полностью виден.Код 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>