@olya_097

Как сделать «раскрывашку»?

как сделать раскрывашку
если нужно учесть что меню в меню
тоесть ul >4 li
и в двух li >подменю

.item- это li
.submenu- подменю
вот так не срабатывает как нужно
а срабатывает элемент после подменю

$('.item').on('click', function() {
$(this).toggleClass('opened').next().slideToggle();
});

так тоже не то

$('.item').on('click', function() {
$(this).toggleClass('opened').classList('.item>.submenu').slideToggle();
});
  • Вопрос задан
  • 367 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Универсальный код для вложенных менюшек на списках.

const sm = $('.side-menu');

if (!sm.length) return;

sm.on('click', 'button', function () {
    let item = $(this).closest('li');

    item.toggleClass('open');
    item.children('ul').slideToggle();
    item.closest('ul').children('li').not(item).find('ul').slideUp();
});

sm.find('.open').children('ul').show();


Разметка такого рода:
<ul class="side-menu">
        <li class="open">
            <span><a href="#">Металлопрокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
            <ul class="side-menu__nested">
                <li class="open">
                    <span><a href="#">Сортовой прокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                    <ul class="side-menu__nested">
                        <li class="">
                            <span><a href="#">Квадратный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Круглый</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Шестигранный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                                <ul class="side-menu__nested">
                                    <li class=""><span><a href="#">Балка</a></span></li>
UPDATE:

Плюс/минус убирайте из псевдо. Стилизуйте кнопки.

https://codepen.io/anon/pen/axBBrZ?editors=1010

Полный пример: https://codepen.io/delphinpro/pen/BEZgwR
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы