Как сделать выпадающее меню на js чтобы при клике на следующий пункт предыдущий скрывался и открывался текущий пункт меню по которому кликнули?

Question

[garik2021]

Вот мой код

$( document ).ready(function(){
	  $("aside.sidebar.bg-clay.on-main  li").click(function(){ // задаем функцию при нажатии на элемент 
	   $(this).children('ul').toggleClass('active'); // добавляем элементу  по которому произведен клик класс
	  });
	});

Но он только сворачивает и разворачивает пункт меню по которому кликнули. А вот при клике на следующий пункт предыдущий не сворачивается а остается развернутым

Вот мой html код сайдбара

<div class="inline-block inline-top inline-block-left bg-clay on-main">
        <div class="chock chock-vertical chock-right bg-w"></div>
 <aside class="sidebar bg-clay on-main">
            

    <ul>
        <li>
            <a  class="link link-drop-down ">
                Пункт меню
                <i class="icon-drop-down pull-right"></i>
            </a>
            <ul>
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                    
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                    
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                     </ul>
        </li>
    </ul>

Как решить эту задачу?

Comments

[Павел Корнилов]

Выложите ваш код на кодпен, чтобы было видно, что у вас получилось, а что нет. Опять же, там будет проще подправить, чтобы не писать все заново.

Answer 1

[Артур Арутюнян]

Вот лови, то что ты хотел, пользуйся

https://codepen.io/artur-arutyunyan/pen/zYKJbrx

Comments

[garik2021]

Спасибо большое

Answer 2

[Stalker_RED]

По вашему описанию не совсем понятно, хотите ли вы меню или аккордеон.

Comments

[garik2021]

Мне нужно меню такого типа

[Rerurk]

Так запишите текущий открытый блок в перемную, и закрывайте его при открытии следующего если он не null

[garik2021]

Rerurk, а как записать текущий открыты блок в переменную?
Я просто новичок в js

[Stalker_RED]

garik2021, ссылки в моем ответе какбы намекают, что таки меню давно уже изобретены.

Или вы пытаетесь сделать самостоятельно с целью обучения?

$('.menu li').on('click', function(){
  $(this).toggleClass('active') // переключаем класс элементу, по кторому был клик
  .siblings().removeClass('active'); // деактивируем всех соседей
});

[garik2021]

Stalker_RED. Я хочу сам сделать к сожалению ваш код не сработал

У меня этот код повторяется несколько раз и получается такая вложенность одна в другую

<ul>
        <li>
            <a  class="link link-drop-down ">
                Пункт меню
                <i class="icon-drop-down pull-right"></i>
            </a>
            <ul>
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                    
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                    
                
                                            <li>
                            <a class="link link-sub " href="#">Подпункт</a>
                        </li>
                     </ul>
        </li>
    </ul>

Нужно присвоить тегу ul класс active который идет после тега a с классами link link dropdown и убрать у предыдущего ul если предыдущий пункт раскрыт