Javascript 引导4嵌套下拉列表

我正在尝试构建一个嵌套的下拉菜单。虽然我已经设法让它打开下一个级别，但我的实现未能在单击事件时关闭

javascript

 const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
    nodeList.forEach((elem) => {
      elem.addEventListener('click', (e) => {
      e.stopPropagation();
        let parent = elem.offsetParent;
        if (!elem.nextElementSibling.classList.contains('show')) {
          parent.classList.remove('show');
        }

        let subMenu = elem.nextElementSibling;
        console.log(subMenu);
        subMenu.classList.toggle('show');
        elem.parentElement.classList.toggle('show');
        console.log(elem.parentElement);
      });
    });

---

如果您不打算让多个下拉菜单执行完全不同的操作，请删除

。下拉菜单

应修复初始菜单按钮

对于在父关闭时关闭的子菜单，您需要迭代这些菜单并关闭每个菜单。请参阅此处的

菜单ustoclose.forEach

逻辑：

const nodeList=document.querySelectorAll（'a.dropdown-toggle'）；
节点列表forEach（（elem）=>{
元素addEventListener（'单击'，（e）=>{
e、 停止传播（）；
让子菜单=elem.nextElementSibling；
console.log（子菜单）；
子菜单.classList.toggle（'show'）；
如果（！subMenu.classList.contains（'show'））{
让menusToClose=subMenu.queryselectoral（'ul.dropdown menu'）；
menusToClose.forEach（（menuToClose）=>{
menuToClose.classList.remove（'show'）；
});
}
});
});
//*//复制此css*/
.导航栏灯.导航栏导航.导航链接{
颜色：rgb（64,64,64）；
}
.btco菜单li>a{
填充：10px 15px；
颜色：#000；
}
.btco菜单。活动a：焦点，
.btco菜单李a：焦点，
.navbar>.show>a:焦点{
背景：透明；
大纲：0；
}
.dropdown menu.show>.dropdown toggle:：after{
变换：旋转（-90度）；
}


















































在关闭父菜单时是否要关闭所有子菜单？是的，可能会这样。@L.S此解决方案是否成功？是否有任何方法可以在没有JS的情况下进行嵌套下拉列表？也许可以使用HTML和一些非常复杂的CSS，但没有允许嵌套下拉列表的本机HTML元素。如果你有一个你想要的例子/模型，你可以试一下，把你的发现发布在这里？