点击div外面该div消失

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<style type="text/css">
.main {
width: 300px;
height: 300px;
background: red;
}
.content {
width: 100px;
height: 100px;
background: blue;
}
</style>
<script type="text/javascript">
// $(function() { //方法一
// $("#showdiv").click(function(e) {
// if($("#test").is(":hidden")) {
// $("#test").fadeIn();
// e ? e.stopPropagation() : event.cancelBubble = true;
// }
// });
// $("#test").click(function(e) {
// e ? e.stopPropagation() : event.cancelBubble = true;
// });
// $(document).click(function() {
// $("#test").fadeOut();
// });
// })
// $(function(){ //方法二
// $("#showdiv").click(function(e){
// alert(e.target.className);
// if(e.target.className!=="content"){
// $("#test").hide();
//// $("#showdiv").hide();
// }
// })
// $("#test").click(function(){
// alert(1111);
// return false; //阻止事件冒泡到父级DIV
// })
// })
$(function(){ //方法三
$("#showdiv").click(function(){
$("#test").hide();
return false;
})
$("#test").click(function(){
return false;
})
})
<body>
<div id="showdiv" class="main">
<div id="test" class="content">
</div>
</div>
</body>
点击div外面该div消失的更多相关文章
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 点击div外面该div消失(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 21.JQ的监听事件(点击div外面可以让它消失)
JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...
- 点击其它位置,div下拉菜单消失
接下拉菜单那一篇: 加上点击其它位置,下拉菜单消失. 纯js写法: window.document.addEventListener('click', function(e) { var e = e ...
- 如何设计点击点击一个div,其他div做出对应反应,以及获取一个节点下的子节点
<div id="show"> <div>1</div> <div>2</div> <div>3</d ...
- 点击自动显示/隐藏DIV代码。(简单实用)
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
随机推荐
- jqGrid学习笔记(二)
本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...
- SGU 319. Kalevich Strikes Back (线段树)
319. Kalevich Strikes Back Time limit per test: 0.5 second(s)Memory limit: 65536 kilobytes input: st ...
- UIImageView、UISlider、UISwitch、UIStepper、UISegmentControl
UIImageView——图像视图 作用:专门用来显示图片的控件 . 设置图像 [self.imageView setImage:[UIImage imageNamed:@"abc.png& ...
- 关于C# 窗体自动隐藏和加载的问题
最近在写一个小项目,开发一个小程序配合其他软件使用,其中一款软件在使用工作时需要截图生成报告,此时不能有其他应用程式界面在显示器桌面显示,故需要自动隐藏和加载窗体,通过阅读Windows API实现了 ...
- 安装uwsgi记录
yum install gcc pip install uwsgi 报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 ... 解决: ...
- codeforces 420B Online Meeting
一道实现很蛋疼的题.必须静下理清思路,整理出各种情况.不然就会痛苦地陷入一大堆if..else里不能自拔. #pragma comment(linker, "/STACK:102400000 ...
- UICollectionView进阶练习
上一篇中的干货看完,不觉感觉还是有点虚,今天我们来点实的,做了两个小DEMO,源码已放GitHub,主要是针对UICollectionView做了联系.第一个DEMO是针对UICollectionVi ...
- LeetCode OJ-- Remove Element
https://oj.leetcode.com/problems/remove-element/ 简单处理 class Solution { public: int removeElement(int ...
- JDBC学习笔记(1)
说明:本系列学习笔记主要是学习传智播客的李勇老师的教学课程和一本英文电子书<JDBC Recipes A Problem-Solution Approach>所作的笔记. 1,什么是JDB ...
- 将特定TD颜色改变的两种方法
方法一:取table值 方法二:使用tbody