Есть дерево категорий с подкатегориями. Когда я нахожусь на странице какой-либо категории или подкатегории, активному и родительскому элементу прислаевается класс active. Например, если я нахожусь в подкатегории Link31, то код выглядит так:
<div class="box-category">
<ul>
<li>
<a href="url1">Link1</a>
<ul class="active">
<li>
<a href="url11">Link11</a>
</li>
<li>
<a href="url12">Link12</a>
</li>
<li>
<a href="url13" class="active">Link13</a>
</li>
<li>
<a href="url14">Link14</a>
</li>
<li>
<a href="url15">Link15</a>
</li>
</ul>
</li>
<li>
<a href="url2">Link2</a>
<ul>
<li>
<a href="url21">Link21</a>
</li>
<li>
<a href="url22">Link22</a>
</li>
<li>
<a href="url23">Link23</a>
</li>
<li>
<a href="url24">Link24</a>
</li>
<li>
<a href="url25">Link25</a>
</li>
<li>
<a href="url26">Link26</a>
</li>
</ul>
</li>
</ul>
</div>
Если визуально, то так:
Вопрос: как оставлять видимой только родительский ul выбранной подкатегории со всеми его li? Т.е. если мы находимся, например, на странице Link13, должно показываться только:
Пытался делать так, но остается только родительский ul + выбранный li, а все остальные li пропадают:
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var subcat = $('.box-category ul:nth-child(1) li a');
for (var k = 0; k < subcat.length; k++) {
if (hasClass(subcat[k], 'active')) {
$(subcat[k]).closest('li').css('display', 'block');
} else {
$(subcat[k]).closest('li').css('display', 'none');
}
}
