我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
这是一个更通用的解决方案，它允许监视多个元素，并动态地从队列中添加和删除元素。
它保存一个全局队列（autoCloseQueue）——一个对象容器，用于在外部单击时应关闭的元素。
每个队列对象键都应该是DOM元素id，值应该是一个具有2个回调函数的对象：
{onPress: someCallbackFunction, onOutsidePress: anotherCallbackFunction}
将其放入文档就绪回调中：
window.autoCloseQueue = {}
$(document).click(function(event) {
for (id in autoCloseQueue){
var element = autoCloseQueue[id];
if ( ($(e.target).parents('#' + id).length) > 0) { // This is a click on the element (or its child element)
console.log('This is a click on an element (or its child element) with id: ' + id);
if (typeof element.onPress == 'function') element.onPress(event, id);
} else { //This is a click outside the element
console.log('This is a click outside the element with id: ' + id);
if (typeof element.onOutsidePress == 'function') element.onOutsidePress(event, id); //call the outside callback
delete autoCloseQueue[id]; //remove the element from the queue
}
}
});
然后，当创建id为“menuscontainer”的DOM元素时，只需将此对象添加到队列：
window.autoCloseQueue['menuscontainer'] = {onOutsidePress: clickOutsideThisElement}
其他回答
我最后做了这样的事情：
$(document).on('click', 'body, #msg_count_results .close',function() {
$(document).find('#msg_count_results').remove();
});
$(document).on('click','#msg_count_results',function(e) {
e.preventDefault();
return false;
});
我在新容器中有一个关闭按钮，用于最终用户友好的UI。为了不通过，我不得不使用return false。当然，有一个A HREF带你去某个地方会很好，或者你可以调用一些ajax的东西。不管怎样，这对我来说都很好。这正是我想要的。
$（'html'）.click（function（）{//隐藏菜单（如果可见）});$（'#menucontainer'）.click（函数（事件）{event.stopPropagation（）；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><html><button id=“#menucontainer”>确定</button></html>
我读过2021的所有内容，但若并没有错的话，也并没有人提出过这样简单的建议，来解除和删除事件。使用了前面的两个答案和更多的小技巧，所以我把所有的都放在了一个里面（它也可以作为一个参数添加到函数中以传递选择器，以获得更多的弹出窗口）。
也许有人知道这个笑话是有用的。也可以这样做：
<div id="container" style="display:none"><h1>my menu is nice, but it disappears if I click outside it</h1></div>
<script>
function printPopup() {
$("#container").css({"display": "block"});
var remListener = $(document).mouseup(function (e) {
if ($(e.target).closest("#container").length === 0 &&
(e.target != $('html').get(0)))
{
//alert('closest call');
$("#container").css({"display": "none"});
remListener.unbind('mouseup'); // Isn't it?
}
});
}
printPopup();
</script>
您不需要（很多）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>
该事件具有元素的名为event.path的属性，该属性是“以树顺序列出其所有祖先的静态有序列表”。要检查事件是否源自特定DOM元素或其子元素之一，只需检查该特定DOM元素的路径。它还可以用于通过在some函数中对元素检查进行逻辑“或”运算来检查多个元素。
$（“body”）.click（函数）{target=document.getElementById（“main”）；flag=event.path.some（函数（el，i，arr）{返回（el==目标）})if（标志）{console.log（“内部”）}其他{console.log（“外部”）}});#主要的，主要的{显示：内联块；背景：黄色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“main”>＜ul＞<li>测试总管</li><li>测试总管</li><li>测试总管</li><li>测试总管</li><li>测试总管</li></ul></div><div id=“main2”>外部主管道</div>
所以你的情况应该是
$("body").click(function() {
target = $("#menuscontainer")[0];
flag = event.path.some(function(el, i, arr) {
return (el == target)
});
if (!flag) {
// Hide the menus
}
});
