Перекрытие пунктов меню 3 уровня
Пытаюсь исправить ошибку в работе меню на jQuery: при открытии пунктов меню 3 уровня получается, что одни пункты подменю перекрывают другие. А предыдущие по идее должны скрываться при открытии новых пунктов.
Подробно меню и его код отображены на скрине: ссылка на меню
Сейчас скрипт открытия и закрытия 2 и 3 уровня меню реализован так:
$('.header-modal__dropdowns img').on('click', function(e) {
e.preventDefault();
$(this).parent('.header-modal__dropdowns').next('.header-modal__lists').toggleClass('active');
})
$('.header-modal__dropdowns img').on('click', function(e) {
e.preventDefault();
$(this).parent('.header-modal__dropdowns').next('.header-modal__listss').toggleClass('active');
$(this).parent('.header-modal__dropdowns').prev('.header-modal__listss').removeClass('active');
})
Пример кода меню:
<ul class="header-modal__lists active">
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-111"><a class="header-modal__dropdowns">Арбитражные споры<img src="https://ufalawyer.ru/wp-content/themes/aktiv/images/chevron-down.svg" style="flex-shrink: 0;"></a>
<ul class="header-modal__listss active">
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="https://ufalawyer.ru/desk/">Арбитражный юрист и адвокат в Уфе</a></li>
<li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-284"><a href="https://ufalawyer.ru/vzyskanie-zadolzhennosti-po-dogovoru-postavki/">Взыскание задолженности по договору поставки</a></li>
<li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="https://ufalawyer.ru/vzyskanie-zadolzhennosti-po-dogovoru-kupli-prodazhi/">Взыскание задолженности по договору купли-продажи</a></li>
<li id="menu-item-523" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523"><a href="https://ufalawyer.ru/vzyskanie-zadolzhennosti-po-dogovoru-podrjada/">Взыскание задолженности по договору подряда</a></li>
<li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="https://ufalawyer.ru/vzyskanie-zadolzhennosti-po-dogovoru-arendy/">Взыскание задолженности по договору аренды</a></li>
<li id="menu-item-285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-285"><a href="https://ufalawyer.ru/vnesenie-izmenenij-v-ooo/">Внесение изменений в ООО</a></li>
<li id="menu-item-286" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a href="https://ufalawyer.ru/professionalnaja-pomoshh-v-likvidacii-ooo/">Ликвидации ООО</a></li>
<li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="https://ufalawyer.ru/registracija-ooo/">Регистрация ООО</a></li>
</ul>
</li>
<li id="menu-item-118" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-118"><a class="header-modal__dropdowns">Банкротство физических лиц<img src="https://ufalawyer.ru/wp-content/themes/aktiv/images/chevron-down.svg" style="flex-shrink: 0;"></a>
<ul class="header-modal__listss active">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-292"><a href="https://ufalawyer.ru/bankrotstvo-fizicheskih-lic-v-ufe/">Банкротство физических лиц в Уфе</a></li>
<li id="menu-item-319" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-319"><a href="https://ufalawyer.ru/bankrotstvo-pensionerov/">Банкротство пенсионеров</a></li>
<li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="https://ufalawyer.ru/297-2/">Банкротство через МФЦ</a></li>
<li id="menu-item-325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-325"><a href="https://ufalawyer.ru/besplatnaja-konsultacija-po-bankrotstvu/">Бесплатная консультация по банкротству</a></li>
<li id="menu-item-317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-317"><a href="https://ufalawyer.ru/kakoe-imushhestvo-ne-prodajotsja-pri-bankrotstve/">Какое имущество не продаётся при банкротстве</a></li>
<li id="menu-item-524" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-524"><a href="https://ufalawyer.ru/konsultacija-jurista-po-bankrotstvu-fizicheskih-lic-onlajn/">Консультация юриста по банкротству физических лиц онлайн</a></li>
<li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="https://ufalawyer.ru/otmena-sudebnogo-prikaza-pri-bankrotstve/">Отмена судебного приказа при банкротстве</a></li>
<li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="https://ufalawyer.ru/prekrashhenie-ispolnitelnogo-proizvodstva-pri-bankrotstve/">Прекращение исполнительного производства при банкротстве</a></li>
<li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href="https://ufalawyer.ru/snjatie-zapreta-na-vyezd-za-granicu/">Снятие запрета на выезд за границу</a></li>
<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321"><a href="https://ufalawyer.ru/spisat-dolgi-po-kreditam/">Списать долги по кредитам</a></li>
<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322"><a href="https://ufalawyer.ru/jurist-po-bankrotstvu/">Юрист по банкротству физических лиц</a></li>
</ul>
</li>
Необходимый результат: чтобы следующий и предыдущие элементы были скрытыми, то есть удалить у них класс active. Пока удаётся сделать только тоггл текущему элементу, остальные видны, если по ним не кликнуть.
Заранее благодарю за возможную помощь в решении вопроса.