Привет! Помогите реализовать следующую задачу, сам я не понимаю как это правильно сделать и готовых решений найти мне не удалось..
Есть раскрывающееся боковое меню, в нём есть категории (мужчины и женщины и т.п.) и у них есть подкатегории (одежды обувь, аксессуары), но и у каждой подкатегории есть свои подкатегории (например для одежды это куртки, футболки). Как реализовать следующее?? Открыв страницу с товаром например мужской курткой, меню уже должно быть раскрыто у мужчин и категории одежда.
<div class="left-menu-accordion">
<ul>
<li class="has-sub" id="men"><a>мужчины</a>
<ul id="men-all">
<li class="has-sub2" id="men-clothes"><a>Верхняя одежда</a>
<ul id="men-clothes-all">
<li><a href="/men/clothes/jackets">Куртки</a></li>
<li><a href="/men/clothes/t-shirts">Куртки</a></li>
</ul>
</li>
<li class="has-sub2" id="men-shoes"><a>Обувь</a>
<ul id="men-shoes-all">
<li><a href="/men/shoes/trainers">Кроссовки</a></li>
<li><a href="/men/shoes/sneakers">Кеды</a></li>
</ul>
</li>
<li class="has-sub2" id="men-accessories"><a>Аксессуары</a>
<ul id="men-accessories-all">
<li><a href="/men/accessories/hats">Шапки</a></li>
<li><a href="/men/accessories/caps">Кепки</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub" id="women"><a>Женщины</a>
<ul id="women-all">
<li class="has-sub2" id="women-clothes"><a>Oдежда</a>
<ul id="women-clothes-all">
<li><a href="/women/clothes/jackets">Куртки</a></li>
<li><a href="/women/clothes/t-shirts">Куртки</a></li>
</ul>
</li>
<li class="has-sub2" id="women-shoes"><a>Обувь</a>
<ul id="women-shoes-all">
<li><a href="/women/shoes/trainers">Кроссовки</a></li>
<li><a href="/women/shoes/sneakers">Кеды</a></li>
</ul>
</li>
<li class="has-sub2" id="women-accessories"><a>Аксессуары</a>
<ul id="women-accessories-all">
<li><a href="/women/accessories/hats">Шапки</a></li>
<li><a href="/women/accessories/caps">Кепки</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<style>
.left-menu-accordion > ul > li > ul {display: none;}
</style>
$(document).ready(function () {
$('.left-menu-accordion li.has-sub a').on('click', function(){
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').attr('style', 'display:none');
}
else {
element.addClass('open');
element.children('ul').attr('style', 'display:block');
element.siblings('li').children('ul').attr('style', 'display:none');
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').attr('style', 'display:none');
}
});
});
На данный момент реализовал это следующим образом..для каждого товара добавляю следующий скрипт, в котором меняю id на нужные мне категории и подкатегории.
document.getElementById('men').className = 'has-sub open';
document.getElementById('men-all').style.display = 'block';
document.getElementById('men-clothes').className = 'has-sub open';
document.getElementById('men-clothes-all').style.display = 'block';
Способ работает, но он не практичный какой-то и занимает много времени. Как это можно сделать более простым способом, возможно автоматическим, чтоб не прописывать все эти id для каждой страницу??
