Javascript 修复代码，防止单击时下拉菜单关闭

我从w3scgool获得了代码并对其进行了修改。下拉菜单打开，但当我点击它的内部-子菜单，然后它关闭。下面是纯JavaScript代码

var dropdown=document.getElementsByClassName（'dropdown-btn'）；
var i；
对于（i=0；i

nav.side-nav{
顺序：0；
显示器：flex；
弹性：1；
弯曲方向：立柱；
自我调整：伸展；
保证金底部：0.67雷姆；
}
导航侧-导航ul{
保证金：0；
}
侧导航李{
边框底部：1px实心#d9dadc；
左边框：1px实心#d9dadc；
右边框：1px实心#d9dadc；
列表样式：无；
填充：5px15px；
字号：17px；
线高：24px；
}
李：第一个孩子{
背景#092a31；
颜色：白色；
边界：无；
字体大小：20px；
填充：15px；
线高：1.1；
}
nav.side-nav li:非（：第一个孩子）：悬停{
背景：#cda600；
颜色：白色；
光标：指针；
}
/*下拉菜单*/
.下拉式容器{
显示：无；
背景色：#ffffff；
左侧填充：8px；
}

some1
some1
some1
some1








菜单

在完成@Heretic Monkey和@Ganesh chaitanya建议的修改后，您可以使用map（）代替for循环，再次使用classList.toggle（）代替else if来简化代码。 只需使用添加到div中的新类稍微修改css即可

var dropdown=document.getElementsByClassName（“dropdown btn”）；
//这里是下拉列表。map（）不起作用，请使用
Array.prototype.map.call（下拉菜单，函数（下拉菜单）{
drop.addEventListener（“单击”，函数（）{
drop.classList.toggle（“活动”）；
var dropdownContent=drop.nextElementSibling；
//在div中添加新类时使用classList.toggle
dropdownContent.classList.toggle（“disp容器”）；
});
});
nav.side-nav li:非（：第一个子项）：悬停{
背景：#cda600；
颜色：白色；
光标：指针；
}
/*下拉菜单*/
/*删除此处的显示*/
.下拉式容器{
背景色：#ffffff；
左侧填充：8px；
}
/*创建一个新类并在此处添加显示*/
.disp容器{
显示：无；
}


some1
some1
some1
some1

















请更新您的HTML以使其更易于回答。感谢您的反馈，我使用HTML部分更新了代码。您的菜单项具有设置
window.location.href
属性的
onclick
，这些属性会导致页面重新加载。删除这些属性。所有导致页面刷新的项目都会触发onclick事件。您使用onclick的具体原因是什么？如果不只是删除以查看下拉列表。如果您使用了任何CSS或库，请指定它。因为我们看不到下拉效果