我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
使用本机JS API最接近方法的2020解决方案。
document.addEventListener（'click'，（｛target｝）=>{if（！target.lestest（'#menupop'））{document.querySelector（'#menupop'）.style.display=“无”}})#菜单弹出窗口{宽度：300px；高度：300px；背景色：红色；}<div id=“menupop”>单击外部将关闭此</div>
其他回答
试试这个：
$('html').click(function(e) {
if($(e.target).parents('#menuscontainer').length == 0) {
$('#menuscontainer').hide();
}
});
https://jsfiddle.net/4cj4jxy0/
但请注意，如果单击事件无法到达html标记，则这将无法工作。（可能其他元素已停止传播（））。
我认为最好的方法是这样做。
$(document).on("click", function(event) {
clickedtarget = $(event.target).closest('#menuscontainer');
$("#menuscontainer").not(clickedtarget).hide();
});
这种类型的解决方案很容易适用于多个菜单以及通过javascript动态添加的菜单。基本上，它只允许您单击文档中的任何位置，并检查您单击的元素，并选择最接近的“#菜单容器”。然后它会隐藏所有菜单容器，但不包括您单击的菜单容器。
不确定菜单是如何构建的，但可以在JSFiddle中复制我的代码。这是一个非常简单但功能全面的菜单/模式系统。您需要做的就是构建html菜单，代码将为您完成这项工作。
https://jsfiddle.net/zs6anrn7/
对于某些人来说，这可能是一个更好的解决方案。
$(".menu_link").click(function(){
// show menu code
});
$(".menu_link").mouseleave(function(){
//hide menu code, you may add a timer for 3 seconds before code to be run
});
我知道mouseleave不仅意味着在外面单击，还意味着离开该元素的区域。
一旦菜单本身位于menu_link元素内，那么单击或移动菜单本身应该不会有问题。
您不需要（很多）JavaScript，只需要选择器内的：focus：
使用侧边栏：集中在显示侧边栏。在侧边栏和正文元素上设置tabindex=-1，使其可聚焦。使用sidbarEl.focus（）和document.body.focus）设置侧边栏的可见性。
const menuButton=document.querySelector（'.menu button'）；const sidebard=document.querySelector（'.sidebard'）；menuButton.onmousedown=ev=>{ev.prpreventDefault（）；（边栏.包含（document.activeElement）？document.body:侧边栏）.focus（）；};*｛框大小调整：边框；｝.侧边栏{位置：固定；宽度：15em；左：-15em；顶部：0；底部：0；过渡：左0.3s缓进缓出；背景色：#eef；衬垫：3em 1em；}侧边栏：焦点在{左：0；}.侧边栏：焦点{大纲：0；}.菜单按钮{位置：固定；顶部：0；左：0；填充：1em；背景色：#eef；边框：0；}正文{最大宽度：30em；边距：3em；}<body tabindex='-1'><nav class='sidebar'tabindex='-1'>提要栏内容<input-type=“text”/></nav><button class=“菜单按钮”>☰</按钮>身体内容在这里，Lorem ipsum坐amet等</body>
如果您只想在单击按钮时显示一个窗口，而在单击外部时取消显示该窗口。（或再次按下按钮）此波纹管工作良好
document.body.onclick = function() { undisp_menu(); };
var menu_on = 0;
function menu_trigger(event){
if (menu_on == 0)
{
// otherwise u will call the undisp on body when
// click on the button
event.stopPropagation();
disp_menu();
}
else{
undisp_menu();
}
}
function disp_menu(){
menu_on = 1;
var e = document.getElementsByClassName("menu")[0];
e.className = "menu on";
}
function undisp_menu(){
menu_on = 0;
var e = document.getElementsByClassName("menu")[0];
e.className = "menu";
}
别忘了这个按钮
<div class="button" onclick="menu_trigger(event)">
<div class="menu">
以及css：
.menu{
display: none;
}
.on {
display: inline-block;
}
