我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域外单击时,我希望隐藏这些元素。
jQuery是否可以实现这样的功能?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域外单击时,我希望隐藏这些元素。
jQuery是否可以实现这样的功能?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
试试这个:
$('html').click(function(e) {
if($(e.target).parents('#menuscontainer').length == 0) {
$('#menuscontainer').hide();
}
});
https://jsfiddle.net/4cj4jxy0/
但请注意,如果单击事件无法到达html标记,则这将无法工作。(可能其他元素已停止传播())。
其他回答
单击元素时,这将切换导航菜单。
$(document).on('click',函数(e){var elem=$(e.target).最近('#menu'),box=$(e.target).最近('#nav');if(元素长度){e.预防违约();$('#nav').tggle();}否则如果(!box.length){$('#nav').hide();}});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><li id=“menu”><a></a></li><ul id=“nav”><!--单击菜单时,导航将切换(在本例中它可以是一个图标)--><li class=“page”><a>第1页</a></li><li class=“page”><a>第2页</a></li><li class=“page”><a>第3页</a></li><li class=“page”><a>第4页</a></li></ul>
功能:
$(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();
}
$("html").click(function(){
if($('#info').css("opacity")>0.9) {
$('#info').fadeOut('fast');
}
});
这应该是有效的:
$('body').click(function (event) {
var obj = $(event.target);
obj = obj['context']; // context : clicked element inside body
if ($(obj).attr('id') != "menuscontainer" && $('#menuscontainer').is(':visible') == true) {
//hide menu
}
});
还在寻找检测外部点击的完美解决方案?别再看了!介绍Clickout Event,这是一个为Clickout和其他类似事件提供通用支持的包,它适用于所有场景:普通HTML onclickout属性、普通JavaScript的.addEventListener('clickkout')、jQuery的.on('click kout'”)、Vue.js的v-on:cclickout指令。只要前端框架内部使用addEventListener来处理事件,Clickout Event适用于它。只需在页面中的任何位置添加脚本标记,它就会像魔术一样发挥作用。
HTML属性
<div onclickout="console.log('clickout detected')">...</div>
香草JavaScript
document.getElementById('myId').addEventListener('clickout', myListener);
jQuery
$('#myId').on('clickout', myListener);
Vue.js
<div v-on:clickout="open=false">...</div>
有棱角的
<div (clickout)="close()">...</div>