Javascript 子菜单不是单击目标时不会隐藏

我花了好几天的时间来解决这个简单的问题。我的导航菜单的一个选项卡的子菜单应该在单击其他元素时关闭，但它不会关闭

var query=document.querySelector.bind（文档）；
查询（'.drop-down'）。onclick=function（）{
查询（'.sub-menu'）.classList.toggle（'nav-show'）；
}
window.onclick=函数（e）{
if（查询（'.sub菜单'）.style.display=='block'）{
if（e.target！=查询（'.sub菜单'））{
查询（'.sub-menu'）.classList.remove（'nav-show'）；
}
}
}

菜单{
显示：表格；
背景：#f9f8f8；
填充：0；
保证金：5em自动；
边界半径：0.5em；
盒影：0 3px 8px-5px rgba（0,0,0,0.8）；
}
.菜单>李{
显示：表格单元格；
宽度：100px；
列表样式：无；
文本对齐：居中；
}
.菜单>li.下拉列表{
位置：相对位置；
}
.菜单>李>a{
显示：块；
文字装饰：无；
颜色：#9c9c9f；
填充：.8em；
字体：1em Arial，无衬线；
}
.menu>li>a:悬停{
颜色：#757579；
}
.子菜单{
位置：绝对位置；
填充：0；
最高：100%；
右：0；
左：0；
背景：#f9f8f8；
边框：1px实心#f1f1；
盒影：0 3px 8px-5px rgba（0,0,0,0.8）；
显示：无；
}
.sub-menu.nav-show{
显示：块；
}
.子菜单>li{
列表样式：无；
显示：块；
文本对齐：居中；
}
.子菜单>li:非（：第一个子菜单）{
边框顶部：1px实心#f1f1；
}
.子菜单>li>a{
文字装饰：无；
显示：块；
字体：0.9em Arial，无衬线；
颜色：#9c9c9f；
填充：1em 0；
}
.子菜单>li>a:悬停{
背景：白色；
}

您需要防止执行任何父事件处理程序。 有关更多信息，请参阅

下面是jQuery的一个快速示例：

$（“.drop-down”）。单击（函数（e）{
e、 停止传播（）；
$（'.sub-menu'）.toggleClass（'nav-show'）；
});
$（文档）。单击（函数（e）{
$（'.sub-menu'）.removeClass（'nav-show'）；
});
菜单{
显示：表格；
背景：#f9f8f8；
填充：0；
保证金：5em自动；
边界半径：0.5em；
盒影：0 3px 8px-5px rgba（0,0,0,0.8）；
}
.菜单>李{
显示：表格单元格；
宽度：100px；
列表样式：无；
文本对齐：居中；
}
.菜单>li.下拉列表{
位置：相对位置；
}
.菜单>李>a{
显示：块；
文字装饰：无；
颜色：#9c9c9f；
填充：.8em；
字体：1em Arial，无衬线；
}
.menu>li>a:悬停{
颜色：#757579；
}
.子菜单{
位置：绝对位置；
填充：0；
最高：100%；
右：0；
左：0；
背景：#f9f8f8；
边框：1px实心#f1f1；
盒影：0 3px 8px-5px rgba（0,0,0,0.8）；
显示：无；
}
.sub-menu.nav-show{
显示：块；
}
.子菜单>li{
列表样式：无；
显示：块；
文本对齐：居中；
}
.子菜单>li:非（：第一个子菜单）{
边框顶部：1px实心#f1f1；
}
.子菜单>li>a{
文字装饰：无；
显示：块；
字体：0.9em Arial，无衬线；
颜色：#9c9c9f；
填充：1em 0；
}
.子菜单>li>a:悬停{
背景：白色；
}




















您似乎没有完全意识到自己在做什么。为什么使用display:table？这会影响执行吗？非常感谢。香草JS也可以吗？是的，它也是一个vailla JS属性/方法。请参阅更新答案中的链接。