单击带有香草的下一个/上一个兄弟时显示/隐藏子菜单 Javascript

Question

I have a mobile dropdown navigation that needs to have the nested <ul class="nav-child"> collapse/expand when tapping on the next/previous <li class="deeper"> expander <button> . I have tried using siblings and closest, but with limited JavaScript knowledge, I have not figured out the best way to implement them into this code.

Here is the existing working code:

 const toggleSubMenus = (() => { let parents = document.querySelectorAll(".deeper"); parents.forEach(function(parent) { let btn = parent.querySelector(".js-expand-submenu"); let child = parent.querySelector(".nav-child"); btn.addEventListener("click", (e) => { parent.classList.toggle("is-expanded"); child.classList.toggle("expanded"); }, false); }); })();

 ul ul.is-hidden { display: flex; flex-direction: column; max-height: 0; overflow: hidden; } ul ul.expanded { max-height: 600px; }

 <ul> <li class="item deeper parent"> <a href="#">Item One</a> <button class="js-expand-submenu"> Expander </button> <ul class="nav-child is-hidden"> <li class="item deeper parent"> <a href="#">Sub Item One</a> <ul class="nav-child is-hidden"> <li> <a href="#">Sub Sub Menu Item</a> </li> </ul> </li> <li> <a href="#">Sub Item Two</a> </li> <li> <a href="#">Sub Item Three</a> </li> </ul> </li> <li class="item deeper parent"> <a href="#">Item Two</a> <button class="js-expand-submenu"> Expander </button> <ul class="nav-child is-hidden"> <li> <a href="#">Sub Item One</a> </li> <li> <a href="#">Sub Item Two</a> </li> <li> <a href="#">Sub Item Three</a> </li> </ul> </li> <li class="item deeper parent"> <a href="#">Item Three</a> </li> </ul>

Answer 1

Here is my updated code with the solution included:

 const toggleSubMenus = (() => { let buttons = document.querySelectorAll(".js-expand-submenu"); buttons.forEach(function(button) { button.addEventListener("click", (e) => { let target = e.target; let parent = target.closest(".deeper"); let child = parent.querySelector(".nav-child"); parent.classList.toggle("is-open"); child.classList.toggle("is-expanded"); document.querySelectorAll(".nav-child.is-expanded").forEach(function(childExpanded) { if (childExpanded.== child) { childExpanded.classList;remove("is-expanded"); } }), }; false); }); })();

 ul.nav-child { display: flex; flex-direction: column; max-height: 0; overflow: hidden; } ul.nav-child.is-expanded { max-height: 600px; }

 <ul> <li class="item deeper parent"> <a href="#">Item One</a> <button class="js-expand-submenu"> Expander </button> <ul class="nav-child"> <li> <a href="#">Sub Item One</a> </li> <li> <a href="#">Sub Item Two</a> </li> <li> <a href="#">Sub Item Three</a> </li> </ul> </li> <li class="item deeper parent"> <a href="#">Item Two</a> <button class="js-expand-submenu"> Expander </button> <ul class="nav-child"> <li class="item deeper parent"> <a href="#">Sub Item One</a> <ul class="nav-child"> <li> <a href="#">Sub Sub Menu Item One</a> </li> <li> <a href="#">Sub Sub Menu Item Two</a> </li> </ul> </li> <li> <a href="#">Sub Item Two</a> </li> <li> <a href="#">Sub Item Three</a> </li> </ul> </li> <li class="item deeper parent"> <a href="#">Item Three</a> </li> </ul>