jquery 点击页面其他地方隐藏菜单
阅读(1271)
2018-03-03
jquery实现点击某按钮显示div自定义菜单或导航，当点击其他地方或空白处时隐藏菜单。
下面是实现该功能的四步曲。
1、定义html
首先引入jquery.js，我们简单定义html。
<button id="btn">显示div</button> <div id="menu" class="box"> 父DIV <div class="box-child"> 子DIV </div> </div>
button：为点击显示菜单div的按钮
.box：为菜单div
.box-child：为菜单里面的子div（测试用）
2、击事件 click
你需要设置菜单默认为display:none;不显示的，当点击按钮时显示菜单。
$("#btn").click(function(event){
//console.log("点击了btn");
$("#menu").show();
});如何捕获点击其他地方呢？显然需要使用到document了
$(document).click(function(event){
//console.log("点击了其他地方");
$("#menu").hide();
});这个时候你发现菜单没显示，其实是显示了又马上隐藏了。点击btn后也触发了document的click事件。你会发现事件冒泡了。
3、事件冒泡处理
你可以使用return false;或者event.preventDefault();event.stopPropagation();来阻止事件冒泡。
return false; 表示阻止了默认的事件行为并停止了事件通过dom向上冒泡，该操作其实也做了以下那2种操作等。
event.preventDefault(); 表示阻止事件的默认行为
event.stopPropagation(); 表示阻止该dom节点往上冒泡
$("#btn").click(function(event){
//console.log("点击了btn");
$("#menu").show();
return false;
//event.preventDefault();
//event.stopPropagation();
});这时已经实现了一大半，还有个问题就是：除了按钮外，无论你点哪里都隐藏了，包括点菜单自身及点菜单内的子div等元素都触发了隐藏。
4、条件定界
在document的点击事件中（即点击其他地方），需要实现仅 点击的是菜单 或 点击的是菜单的子元素 不需要隐藏。
$(document).click(function(event){
//console.log("点击了其他地方");
var menu = $("#menu");
//点击的不是菜单 且 点击的不是菜单的子元素
if(!menu.is(event.target) && menu.has(event.target).length === 0){
console.log("点击了其他地方");
}else{
console.log("点击了菜单");
}
});这时或基本实现了我们需要的功能，再加入menu.is(":visible")，判断如果菜单是显示的话才去隐藏。
$(document).click(function(event){
//console.log("点击了其他地方");
var menu = $("#menu");
//菜单是已显示的 且 点击的不是菜单 且 点击的不是菜单的子元素
if(menu.is(":visible") && (!menu.is(event.target) && menu.has(event.target).length === 0)){
//console.log("点击了其他地方");
menu.hide();
}
});好了已实现了，下面给出完整例子。
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>test</title>
<script type="text/Javascript" src="jquery.min.js"></script>
<style type="text/css">
.box{border:1px solid #666;background:#ccc;width:150px;height:150px;display:none;}
.box-child{background:blue;width:100px;height:100px;color:#ccc;margin:0 auto;}
</style>
<script type="text/Javascript">
$(function(){
$("#btn").click(function(event){
$("#menu").show();
return false;
});
$(document).click(function(event){
var menu = $("#menu");
if(menu.is(":visible") && (!menu.is(event.target) && menu.has(event.target).length === 0)){
menu.hide();
}
});
});
</script>
</head>
<body>
<button id="btn">显示div</button>
<div id="menu" class="box">
父DIV
<div class="box-child">
子DIV
</div>
</div>
</body>
</html>
原创文章，转载请注明出处：https://www.weizhixi.com/article/78.html