我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
这里还有一个解决方案：
http://jsfiddle.net/zR76D/
用法：
<div onClick="$('#menu').toggle();$('#menu').clickOutside(function() { $(this).hide(); $(this).clickOutside('disable'); });">Open / Close Menu</div>
<div id="menu" style="display: none; border: 1px solid #000000; background: #660000;">I am a menu, whoa is me.</div>
插件：
(function($) {
var clickOutsideElements = [];
var clickListener = false;
$.fn.clickOutside = function(options, ignoreFirstClick) {
var that = this;
if (ignoreFirstClick == null) ignoreFirstClick = true;
if (options != "disable") {
for (var i in clickOutsideElements) {
if (clickOutsideElements[i].element[0] == $(this)[0]) return this;
}
clickOutsideElements.push({ element : this, clickDetected : ignoreFirstClick, fnc : (typeof(options) != "function") ? function() {} : options });
$(this).on("click.clickOutside", function(event) {
for (var i in clickOutsideElements) {
if (clickOutsideElements[i].element[0] == $(this)[0]) {
clickOutsideElements[i].clickDetected = true;
}
}
});
if (!clickListener) {
if (options != null && typeof(options) == "function") {
$('html').click(function() {
for (var i in clickOutsideElements) {
if (!clickOutsideElements[i].clickDetected) {
clickOutsideElements[i].fnc.call(that);
}
if (clickOutsideElements[i] != null) clickOutsideElements[i].clickDetected = false;
}
});
clickListener = true;
}
}
}
else {
$(this).off("click.clickoutside");
for (var i = 0; i < clickOutsideElements.length; ++i) {
if (clickOutsideElements[i].element[0] == $(this)[0]) {
clickOutsideElements.splice(i, 1);
}
}
}
return this;
}
})(jQuery);
其他回答
您不需要（很多）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>
Use:
var go = false;
$(document).click(function(){
if(go){
$('#divID').hide();
go = false;
}
})
$("#divID").mouseover(function(){
go = false;
});
$("#divID").mouseout(function (){
go = true;
});
$("btnID").click( function(){
if($("#divID:visible").length==1)
$("#divID").hide(); // Toggle
$("#divID").show();
});
检查窗口单击事件目标（它应该传播到窗口，只要它没有在其他地方被捕获），并确保它不是任何菜单元素。如果不是，那么你就在菜单之外。
或者检查单击的位置，看看它是否包含在菜单区域中。
功能：
$(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();
}
$(document).click(function() {
$(".overlay-window").hide();
});
$(".overlay-window").click(function() {
return false;
});
如果单击文档，则隐藏给定元素，除非单击同一元素。
