Javascript 单击关闭下拉菜单

我正在用我在网上找到的代码创建下拉列表

问题是，当我单击一个打开的菜单，然后单击下一个菜单时，第一个菜单仍然打开

我在下拉列表、链接、大小和颜色方面都做得很好

…但当我点击另一个下拉列表时，它不会关闭

任何和所有的帮助将不胜感激

函数myFunction{ document.getElementByIdmyDropdown1.classList.toggleshow； } window.onclick=functionevent{ 如果！event.target.matches'.dropbtn1'{ var dropdowns=document.getElementsByClassNamedropdown1-content； var i； 对于i=0；i这里有一种技术不需要ID，也不需要4个函数都做相同的事情。它使用类来分配处理程序，并根据单击的按钮查找元素

//设置事件处理程序 var buttons=document.querySelectorAllbutton.dropbtn； 对于var i=0；i.长度；i++{ 按钮[i]。addEventListenerclick，showDiv； } //设置鼠标输出处理程序 var contentDivs=document.querySelectorAll.dropdown-content； 对于var i=0；i您不需要为每个下拉列表编写单独的函数

…使用event.target查找单击的元素并将show类切换到该元素

…要删除先前添加的show类，请使用for循环查找该元素并删除该类

注意：我将show类添加到.dropbtn1中，然后使用css nexted selector+将：block显示到下一个.dropdown1内容中

堆栈片段

window.onclick=functionevent{ 如果event.target.matches.dropbtn1'{ var dropbuttons=document.getElementsByClassNamedropbtn1； 对于变量i=0；i这段代码是来自某个启用了评论功能的博客还是论坛线程？难道作者不能回答吗？嗨，我可以用jquery重做js来完成所有这些工作吗。我会很高兴地解释它是如何工作的——没有评论或论坛，这是我唯一能弄明白如何使它真正工作的脚本，但我一直坚持让下拉列表消失。我决不是一个编码员，我知道的只是一个f

---

新的东西放在一起…虽然这在代码片段中效果很好，但由于某种原因，它破坏了我实际网站的布局，并且下拉列表不起作用。我不知道为什么，可能是网站上的主脚本有冲突，但我发布的脚本都工作正常，只是没有关闭。有没有办法让原稿只是。。。关闭下拉列表而不进行大规模更改？我更改了很多类名。这可能就是发生的情况-请随意更改它们，只要确保您在javascript中调整querySelector调用即可。在这个脚本上，一个简单的问题是，如果我在下拉列表之外单击，下拉列表不会消失。。。。例如，单击“制冷剂”，然后单击下面的空白处，菜单仍然保留。我已经将脚本修改为mouseover而不是click，是否还有其他方法可以添加到代码中而不进行大规模更改，这样当鼠标退出下拉列表时，下拉列表就会消失？不完全确定您要做什么，但我在菜单div上添加了一个简单的mouseleave处理程序，当鼠标离开时，该处理程序将隐藏它们。就是这样！非常感谢詹姆斯！天哪，你做到了！非常感谢你！所以，在检查跨浏览器兼容性时，这在IE或Safari中似乎不起作用@BhuwanThe实际下拉菜单本身在两种浏览器中都不会打开，但在Chrome、Firefox和Opera中都可以使用。。。思想？