Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2018, 20:45
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

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

Последний раз редактировалось EvgenyTryap, 22.03.2018 в 20:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с меню аккордеон masaniachko jQuery 10 17.06.2018 14:25
в зависимости от выбора настроить внешний вид страницы rfhnjirf Элементы интерфейса 1 20.05.2017 19:44
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Вылеление активных пунков меню. Нужна помощь ! panictmn Элементы интерфейса 27 22.01.2014 12:18
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30