раскрыть меню в зависимости от страницы
Привет! Помогите реализовать следующую задачу, сам я не понимаю как это правильно сделать и готовых решений найти мне не удалось..
Есть раскрывающееся боковое меню, в нём есть категории (мужчины и женщины и т.п.) и у них есть подкатегории (одежды обувь, аксессуары), но и у каждой подкатегории есть свои подкатегории (например для одежды это куртки, футболки). Как реализовать следующее?? Открыв страницу с товаром например мужской курткой, меню уже должно быть раскрыто у мужчин и категории одежда. <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 для каждой страницу?? |
Часовой пояс GMT +3, время: 19:22. |