jQuery 怎么实现点击页面其他地方隐藏菜单
2个回答
2016-07-03 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
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><a href="https://www.baidu.com/s?wd=div%2Bcss&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uHFbnHc1PHP9uAubnj040ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWDYnH0LPWn3P1bdnjTzPW6zr0" target="_blank" class="baidu-highlight">div+css</a>教程</li>
<li>javascript教程</li>
</ul>
</div>
</div>
<div id="noPopEvent">点我不行</div>
</body>
</html>
在很多效果中，都有这样的功能，当点击页面的其他地方时，能够隐藏一个指定的元素，例如在模拟实现的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><a href="https://www.baidu.com/s?wd=div%2Bcss&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uHFbnHc1PHP9uAubnj040ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWDYnH0LPWn3P1bdnjTzPW6zr0" target="_blank" class="baidu-highlight">div+css</a>教程</li>
<li>javascript教程</li>
</ul>
</div>
</div>
<div id="noPopEvent">点我不行</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你需要一个单击事件，在这个事件中传入一个参数，就是你言隐藏的标签的id或者class。然后使用
document.getElementById("id").style.display="none";实现隐藏
document.getElementById("id").style.display="block";实现显示
document.getElementById("id").style.display="none";实现隐藏
document.getElementById("id").style.display="block";实现显示
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
