我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
您不需要（很多）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).on("click", function(event) {
clickedtarget = $(event.target).closest('#menuscontainer');
$("#menuscontainer").not(clickedtarget).hide();
});
这种类型的解决方案很容易适用于多个菜单以及通过javascript动态添加的菜单。基本上，它只允许您单击文档中的任何位置，并检查您单击的元素，并选择最接近的“#菜单容器”。然后它会隐藏所有菜单容器，但不包括您单击的菜单容器。
不确定菜单是如何构建的，但可以在JSFiddle中复制我的代码。这是一个非常简单但功能全面的菜单/模式系统。您需要做的就是构建html菜单，代码将为您完成这项工作。
https://jsfiddle.net/zs6anrn7/
当只有一个元素需要管理时，这里的解决方案工作得很好。然而，如果有多个元素，问题就复杂得多。e.stopPropagation（）的技巧和其他所有技巧都不起作用。
我想出了一个解决方案，也许不是那么容易，但总比什么都没有好。看看：
$view.on("click", function(e) {
if(model.isActivated()) return;
var watchUnclick = function() {
rootView.one("mouseleave", function() {
$(document).one("click", function() {
model.deactivate();
});
rootView.one("mouseenter", function() {
watchUnclick();
});
});
};
watchUnclick();
model.activate();
});
我在YUI 3中是这样做的：
// Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
overlay.hide();
}
});
我正在检查祖先是否不是小部件元素容器，如果目标不是打开控件/元素的对象，如果我想关闭的小部件/元素已经打开（不那么重要）。
可以为DOM元素设置tabindex。当用户在DOM元素外部单击时，这将触发一个模糊事件。
Demo
<div tabindex="1">
Focus me
</div>
document.querySelector("div").onblur = function(){
console.log('clicked outside')
}
document.querySelector("div").onfocus = function(){
console.log('clicked inside')
}
功能：
$(function() {
$.fn.click_inout = function(clickin_handler, clickout_handler) {
var item = this;
var is_me = false;
item.click(function(event) {
clickin_handler(event);
is_me = true;
});
$(document).click(function(event) {
if (is_me) {
is_me = false;
} else {
clickout_handler(event);
}
});
return this;
}
});
用法：
this.input = $('<input>')
.click_inout(
function(event) { me.ShowTree(event); },
function() { me.Hide(); }
)
.appendTo(this.node);
功能非常简单：
ShowTree: function(event) {
this.data_span.show();
}
Hide: function() {
this.data_span.hide();
}
