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

Question

[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();
});

Comments

[Moskus]

Вопросы без исходного кода остаются без ответа.

[olya_097]

Moskus, https://codepen.io/anon/pen/GLNZJr

[Moskus]

olya_097, не мне, а в вопрос.

Answer 1

[Сергей delphinpro]

Универсальный код для вложенных менюшек на списках.

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

Comments

[olya_097]

Сергей delphinpro, не совсем понимаю, как тут сделать
заменила только .side-menu у себя
https://codepen.io/anon/pen/GLNZJr

[Сергей delphinpro]

olya_097, исправил ответ

[olya_097]

Сергей delphinpro, спасибо