我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域之外单击时,我想隐藏这些元素。
这样的事情在jQuery中是可能的吗?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
发布于 2009-07-06 23:10:07
这里的其他解决方案对我不起作用,所以我不得不使用:
if(!$(event.target).is('#foo'))
{
// hide menu
}
编辑:普通Javascript变体(2021-03-31)
我使用此方法来处理单击外部时关闭下拉菜单的问题。
首先,我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。
const className = `dropdown-${Date.now()}-${Math.random() * 100}`;
我创建了一个函数来检查点击和被点击元素的类名。如果单击的元素不包含我在上面生成的自定义类名,它应该将show
标志设置为false
,菜单将关闭。
const onClickOutside = (e) => {
if (!e.target.className.includes(className)) {
show = false;
}
};
然后,我将click处理程序附加到window对象。
// add when widget loads
window.addEventListener("click", onClickOutside);
..。最后是一些家务活
// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);
发布于 2008-09-30 18:13:40
我有一个应用程序,它的工作方式类似于Eran的示例,除了我在打开菜单时将click事件附加到主体...有点像这样:
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
有关jQuery's one()
function的更多信息
发布于 2015-11-02 16:33:34
经过研究,我找到了三个可行的解决方案(我忘记了页面链接以供参考)
第一个解决方案
<script>
//The good thing about this solution is it doesn't stop event propagation.
var clickFlag = 0;
$('body').on('click', function () {
if(clickFlag == 0) {
console.log('hide element here');
/* Hide element here */
}
else {
clickFlag=0;
}
});
$('body').on('click','#testDiv', function (event) {
clickFlag = 1;
console.log('showed the element');
/* Show the element */
});
</script>
第二种解决方案
<script>
$('body').on('click', function(e) {
if($(e.target).closest('#testDiv').length == 0) {
/* Hide dropdown here */
}
});
</script>
第三种解决方案
<script>
var specifiedElement = document.getElementById('testDiv');
document.addEventListener('click', function(event) {
var isClickInside = specifiedElement.contains(event.target);
if (isClickInside) {
console.log('You clicked inside')
}
else {
console.log('You clicked outside')
}
});
</script>
https://stackoverflow.com/questions/152975
复制相似问题