弹框的显示，点击其他地方隐藏
2018-02-22 13:25
344 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
.div1{width: 100px;height: 100px;background: #ff0;margin: 50px auto;color: blueviolet;text-align: center;}
.div2{display: none;width: 100px;height: 100px;background: #f00;margin: 50px auto;color: #fff;text-align: center;}
</style>
</head>
<body>
<div class="div1">
点击
</div>
<div class="div2">
隐藏的div
</div>
</body>
</html>
<script>
$(function(){
$(".div1").click(function(){
$(".div2").toggle();
return false;//关键是这里，阻止冒泡
});
$(".div2").click(function(){
return false;
});
$(document).click(function(){
$(".div2").hide();
});
})
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
.div1{width: 100px;height: 100px;background: #ff0;margin: 50px auto;color: blueviolet;text-align: center;}
.div2{display: none;width: 100px;height: 100px;background: #f00;margin: 50px auto;color: #fff;text-align: center;}
</style>
</head>
<body>
<div class="div1">
点击
</div>
<div class="div2">
隐藏的div
</div>
</body>
</html>
<script>
$(function(){
$(".div1").click(function(){
$(".div2").toggle();
return false;//关键是这里，阻止冒泡
});
$(".div2").click(function(){
return false;
});
$(document).click(function(){
$(".div2").hide();
});
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 点击A显示，点击其他地方隐藏
- 点击输入框显示键盘 点击其他地方隐藏键盘
- 点击输入框显示键盘 点击其他地方隐藏键盘
- 点击隐藏显示几点击其他地方隐藏问题代码还没封装
- jquery 实现点击其他地方隐藏之前点击显示的div标签等
- JS如何实现点击页面其他地方隐藏菜单？
- 点击页面其他地方，隐藏目标div
- js点击页面其它地方将某个显示的DIV隐藏
- 点击页面其他地方取消EditText的焦点并且隐藏软键盘的方法
- jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV
- 控件显示之后，点击其他位置隐藏的实现
- 自定义多个下拉选择框进行点击显示隐藏切换时，点击当前后点击其他，其他不会消失冲突
- 关于鼠标点击其他地方隐藏层的实例（要引入jquery包哦）
- 点击显示指定元素隐藏其他同辈元素的方法
- 点击按钮时显示一个弹框，点击空白，弹框隐藏，也可操作弹框中的内容，也可使用弹框中的按钮关闭弹框
- 点击显示指定元素，隐藏其他同辈元素
- js使点击网页其他地方使显示框消失
- android ExpandableListView点击哪一条那一条显示，而其他条隐藏的实现办法
- jq写点击指定div以外的其他地方隐藏此div