如何在点击时隐藏除活动分支之外的所有项目 - 菜单下拉菜单

Question

I'd like to open one node on click, and remove is-active class from others items.

at this point there is a lot of space taken up after opening a few menu items. I would like only one node to be open at a time. So it needs the is-active class to be removed from the previous sub-item after switching to another sub-item

The red square opens the item.. - Could you please help me?

 const nav = document.querySelector('.menu-primary'); // const navElement = nav.querySelectorAll('.menu-item-has-children'); const navElementIcon = nav.querySelectorAll('.js-navigation-arrow'); // console.log(navElesment); navElementIcon.forEach(function (element) { element.addEventListener("click", function() { let elementParent = element.closest('.menu-item-has-children'); if (elementParent.classList.contains('is-active')) { elementParent.classList.remove('is-active'); } else { elementParent.classList.add('is-active'); } }); });

 .menu-primary a { margin-right: 30px;important. }:menu-primary > li { position; relative: text-align; left. }:menu-primary > li.first-child:menu-item a { margin-top; 0. }:menu-primary > li:nth-child(4) { margin-top; 0. }.menu-primary > li >:menu-item-icon { top; 7px. }.menu-primary > li:sub-menu { position; static: transform; none: display; none: opacity; 1: visibility; visible. }.menu-primary > li.sub-menu >.sub-menu__list > li >:sub-menu__child-list { padding-left; 15px. }:menu-primary > li > a { display; inline-block: font-size; 16px: margin; 8px 0. }:menu-primary a { display; inline-block: font-size; 14px. }:menu-item-icon { display; flex: width; 15px: height; 15px: justify-content; center: align-items; center: position; absolute: top; 7px: right; 0: font-size; 8px: color; #fff: transform; rotate(180deg): transition. 0;2s: background; red: z-index; 10. }.menu-item.is-active >:sub-menu { display; block. }:menu-item { position; relative: margin; 5px 0. }:sub-menu__child-list { display; none: padding-left; 15px. }.menu-item.is-active >:sub-menu__child-list { display; block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu-primary"> <li id="menu-item-58084" class="col-1 menu-icon menu-icon-people menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58084"> <a href="#">About Us</a> <div class="sub-menu"> <ul class="sub-menu__list"> <li id="menu-item-58085" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58085"><a href="#nasz-zespol-psycholog-psychoterapeuta/">Child</a></li> <li id="menu-item-58091" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-58091"> <a href="#">Nasze gabinety</a> <ul class="sub-menu__child-list"> <li id="menu-item-58086" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58086"><a href="#">Gabinet Gocław</a></li> <li id="menu-item-58087" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58087"><a href="#">Gabinet Szczecin</a></li> <li id="menu-item-58088" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58088"><a href="#">Gabinet Ursynów</a></li> <li id="menu-item-58089" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58089"><a href="#">Gabinet Warszawa Centrum</a></li> <li id="menu-item-58090" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58090"><a href="#">Gabinet Wilanów</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-58092" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58092"><a href="#">Praca dla psychoterapeuty</a></li> <li id="menu-item-58093" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58093"><a href="">Współpracują z nami</a></li> </ul> </div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59230" class="col-3 menu-icon menu-icon-gender menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59230"> <a href="#">Contact</a> <div class="sub-menu"> <ul class="sub-menu__list"> <li id="menu-item-59231" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59231"> <a href="#">Sub item 1</a> <ul class="sub-menu__child-list"> <li id="menu-item-59280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59280"><a href="#">Bezpłodność</a> </li> <li id="menu-item-59233" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59233"><a href="#">Depresja poporodowa</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59232"> <a href="#">Trudności w relacji z innymi</a> <ul class="sub-menu__child-list"> <li id="menu-item-59234" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59234"><a href="#wypalenie-zawodowe/">Wypalenie zawodowe</a></li> <li id="menu-item-59235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59235"><a href="#niesmialosc/">Nieśmiałość</a></li> <li id="menu-item-59236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59236"><a href="#przemoc-w-relacji/">Przemoc w relacji</a></li> <li id="menu-item-59237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59237"><a href="#wspoluzaleznienie/">Współuzależnienie</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59238" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59238"> <a href="#">Trudności w relacji ze sobą</a> <ul class="sub-menu__child-list"> <li id="menu-item-59242" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59242"><a href="#jak-podniesc-swoja-samoocene/">Niska samoocena</a> </li> <li id="menu-item-59243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59243"><a href="#prokrastynacja/">Prokrastynacja</a></li> <li id="menu-item-59244" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59244"><a href="#leczenie-depresji/">Depresja</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59247" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59247"> <a href="#">Dolegliwości psychiczne a zaburzenia hormonalne</a> <ul class="sub-menu__child-list"> <li id="menu-item-59249" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59249"><a href="#pms-jak-poradzic-sobie-z-zespolem-napiecia-przedmiesiaczkowego/">PMS napięcie przedmiesiączkowe</a></li> <li id="menu-item-59248" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59248"><a href="#czym-jest-menopauza-jak-poradzic-sobie-z-jej-psychicznymi-objawami/">Menopauza</a> </li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59252" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-59252"> <a href="#abc-zaburzen-odzywiania/">Zaburzenia odżywiania</a> <ul class="sub-menu__child-list"> <li id="menu-item-59253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59253"><a href="#leczenie-ortoreksji/">Leczenie ortoreksji</a></li> <li id="menu-item-59254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59254"><a href="#leczenie-anoreksji/">Leczenie anoreksji</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59260" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59260"> <a href="#">Częste uzależnienia u kobiet</a> <ul class="sub-menu__child-list"> <li id="menu-item-59261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59261"><a href="#uzaleznienie-od-zakupow/">Uzależnienie od zakupów</a> </li> <li id="menu-item-59262" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59262"><a href="#uzaleznienie-od-pracy/">Uzależnienie od pracy</a></li> <li id="menu-item-59263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59263"><a href="#uzaleznienie-od-seksu/">Uzależnienie od seksu</a></li> <li id="menu-item-59264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59264"><a href="#uzaleznienie-od-lekow/">Uzależnienie od leków</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> </ul> </div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> </ul>

Answer 1

I've made two different approaches you can follow, they are described within the code below. I hope I was helpful.

 const nav = document.querySelector('.menu-primary'); // const navElement = nav.querySelectorAll('.menu-item-has-children'); const navElementIcon = nav.querySelectorAll('.js-navigation-arrow'); // console.log(navElesment); navElementIcon.forEach(function (element) { element.addEventListener("click", function() { let elementParent = element.closest('.menu-item-has-children'); if (elementParent.classList.contains('is-active')) { elementParent.classList.remove('is-active'); } else { /* If you just want to close active items in the same level that the one you're opening, use the command below. Example: If you click About Us -> Nasze gabinety -> Contact -> About Us, the Nasze gabinety is going to be opened yet. */ // Array.from(elementParent.parentElement.children) //.forEach((menuItem) => menuItem.classList.remove('is-active')); /* If you want to close all active items, use the command below. Example: If you click About Us -> Nasze gabinety -> Contact -> About Us, the Nasze gabinety is going to be closed. */ Array.from(elementParent.parentElement.querySelectorAll('.is-active')).forEach((menuItem) => menuItem.classList.remove('is-active')); elementParent.classList.add('is-active'); } }); });

 .menu-primary a { margin-right: 30px;important. }:menu-primary > li { position; relative: text-align; left. }:menu-primary > li.first-child:menu-item a { margin-top; 0. }:menu-primary > li:nth-child(4) { margin-top; 0. }.menu-primary > li >:menu-item-icon { top; 7px. }.menu-primary > li:sub-menu { position; static: transform; none: display; none: opacity; 1: visibility; visible. }.menu-primary > li.sub-menu >.sub-menu__list > li >:sub-menu__child-list { padding-left; 15px. }:menu-primary > li > a { display; inline-block: font-size; 16px: margin; 8px 0. }:menu-primary a { display; inline-block: font-size; 14px. }:menu-item-icon { display; flex: width; 15px: height; 15px: justify-content; center: align-items; center: position; absolute: top; 7px: right; 0: font-size; 8px: color; #fff: transform; rotate(180deg): transition. 0;2s: background; red: z-index; 10. }.menu-item.is-active >:sub-menu { display; block. }:menu-item { position; relative: margin; 5px 0. }:sub-menu__child-list { display; none: padding-left; 15px. }.menu-item.is-active >:sub-menu__child-list { display; block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu-primary"> <li id="menu-item-58084" class="col-1 menu-icon menu-icon-people menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58084"> <a href="#">About Us</a> <div class="sub-menu"> <ul class="sub-menu__list"> <li id="menu-item-58085" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58085"><a href="#nasz-zespol-psycholog-psychoterapeuta/">Child</a></li> <li id="menu-item-58091" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-58091"> <a href="#">Nasze gabinety</a> <ul class="sub-menu__child-list"> <li id="menu-item-58086" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58086"><a href="#">Gabinet Gocław</a></li> <li id="menu-item-58087" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58087"><a href="#">Gabinet Szczecin</a></li> <li id="menu-item-58088" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58088"><a href="#">Gabinet Ursynów</a></li> <li id="menu-item-58089" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58089"><a href="#">Gabinet Warszawa Centrum</a></li> <li id="menu-item-58090" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58090"><a href="#">Gabinet Wilanów</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-58092" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58092"><a href="#">Praca dla psychoterapeuty</a></li> <li id="menu-item-58093" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58093"><a href="">Współpracują z nami</a></li> </ul> </div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59230" class="col-3 menu-icon menu-icon-gender menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59230"> <a href="#">Contact</a> <div class="sub-menu"> <ul class="sub-menu__list"> <li id="menu-item-59231" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59231"> <a href="#">Sub item 1</a> <ul class="sub-menu__child-list"> <li id="menu-item-59280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59280"><a href="#">Bezpłodność</a> </li> <li id="menu-item-59233" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59233"><a href="#">Depresja poporodowa</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59232"> <a href="#">Trudności w relacji z innymi</a> <ul class="sub-menu__child-list"> <li id="menu-item-59234" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59234"><a href="#wypalenie-zawodowe/">Wypalenie zawodowe</a></li> <li id="menu-item-59235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59235"><a href="#niesmialosc/">Nieśmiałość</a></li> <li id="menu-item-59236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59236"><a href="#przemoc-w-relacji/">Przemoc w relacji</a></li> <li id="menu-item-59237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59237"><a href="#wspoluzaleznienie/">Współuzależnienie</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59238" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59238"> <a href="#">Trudności w relacji ze sobą</a> <ul class="sub-menu__child-list"> <li id="menu-item-59242" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59242"><a href="#jak-podniesc-swoja-samoocene/">Niska samoocena</a> </li> <li id="menu-item-59243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59243"><a href="#prokrastynacja/">Prokrastynacja</a></li> <li id="menu-item-59244" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59244"><a href="#leczenie-depresji/">Depresja</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59247" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59247"> <a href="#">Dolegliwości psychiczne a zaburzenia hormonalne</a> <ul class="sub-menu__child-list"> <li id="menu-item-59249" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59249"><a href="#pms-jak-poradzic-sobie-z-zespolem-napiecia-przedmiesiaczkowego/">PMS napięcie przedmiesiączkowe</a></li> <li id="menu-item-59248" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59248"><a href="#czym-jest-menopauza-jak-poradzic-sobie-z-jej-psychicznymi-objawami/">Menopauza</a> </li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59252" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-59252"> <a href="#abc-zaburzen-odzywiania/">Zaburzenia odżywiania</a> <ul class="sub-menu__child-list"> <li id="menu-item-59253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59253"><a href="#leczenie-ortoreksji/">Leczenie ortoreksji</a></li> <li id="menu-item-59254" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59254"><a href="#leczenie-anoreksji/">Leczenie anoreksji</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> <li id="menu-item-59260" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59260"> <a href="#">Częste uzależnienia u kobiet</a> <ul class="sub-menu__child-list"> <li id="menu-item-59261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59261"><a href="#uzaleznienie-od-zakupow/">Uzależnienie od zakupów</a> </li> <li id="menu-item-59262" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59262"><a href="#uzaleznienie-od-pracy/">Uzależnienie od pracy</a></li> <li id="menu-item-59263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59263"><a href="#uzaleznienie-od-seksu/">Uzależnienie od seksu</a></li> <li id="menu-item-59264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59264"><a href="#uzaleznienie-od-lekow/">Uzależnienie od leków</a></li> </ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> </ul> </div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span> </li> </ul>