jQuery 怎么实现点击页面其他地方隐藏菜单
发布网友
发布时间：2022-04-20 17:07
我来回答
共2个回答
热心网友
时间：2022-04-22 15:05
jquery实现点击页面其他地方隐藏指定元素:
在很多效果中，都有这样的功能，当点击页面的其他地方时，能够隐藏一个指定的元素，例如在模拟实现的select下拉菜单效果中，当下拉菜单出现的时候，我们往往希望当点击页面其他地方的时候，能够隐藏下拉条，下面就通过一个实例单独介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>点击页面其他地方隐藏div-蚂蚁部落</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.main{
cursor:pointer;
}
.list{
border:1px solid black;
display:none;
}
.list li{
cursor:pointer;
border:1px solid red;
list-style:none;
}
#noPopEvent{
width:100px;
height:100px;
background-color:blue;
font-size:12px;
margin:200px;
text-align:center;
line-height:100px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main").click(function(e){
$(".list").toggle();
e.stopPropagation();
})
$(document).click(function(){
$(".list").hide();
})
$(".list li").click(function(){
$(".main").text($(this).text());
$(".list").hide();
})
$("#noPopEvent").click(function(e){
e.stopPropagation();
})
});
</script>
</head>
<body>
<div style="width:200px;margin:20px;">
<div class="main">蚂蚁部落</div>
<div class="list">
<ul>
<li>div+css教程</li>
<li>javascript教程</li>
</ul>
</div>
</div>
<div id="noPopEvent">点我不行</div>
</body>
</html>
热心网友
时间：2022-04-22 16:23
如果页面里没有其它与document相关的操作，那么上面的代码没问题，也不会出现问题，但不是科学的方法，最科学的方法应该是这样：
$("#btn").click(function(e){
e.stopPropagation();//阻止冒泡
$("#btncon").toggle(); //切换子菜单的显示或隐藏状态
if($("#btncon").is(":visible")){ //判断子菜单是否可见
$(document).one("click",function(){ //如果可见就为documnet对象绑定个一次性的单击事件
$("#btncon").hide();
});
}
});
要隐藏子菜单的时候，不能直接给documnet对象赋予click事件，因为这样在每次点击页面时，都会执行这个事件，所以科学的方法是用one来赋予一个一次性事件，就行了，这里有在线实例演示：网页链接
