点击div之外的元素隐藏div（一）

最新推荐文章于 2022-05-11 09:15:57 发布

M_SSY

最新推荐文章于 2022-05-11 09:15:57 发布

阅读量703

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/M_SSY/article/details/80251032

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#myDiv {
				background-color: pink;
				width: 250px;
				height: 250px;
				display: none;
			}
		</style>

	</head>

	<body>
		<input id="btn" type="button" value="显示DIV">
		<div id="myDiv">
			This is a div;
		</div>
	</body>

</html>
<script type="text/javascript">
	var myDiv = $("#myDiv");
	$(function() {
		$("#btn").click(function(event) {
			// showDiv();//调用显示DIV方法
			$(myDiv).toggle();
			$(document).one("click",
				function() { //对document绑定一个隐藏Div方法
					$(myDiv).hide();
				});

			event.stopPropagation(); //阻止事件向上冒泡
		});
		$(myDiv).click(function(event) {

			event.stopPropagation(); //阻止事件向上冒泡
		});
	});　　　　
	function showDiv() {
		$(myDiv).fadeIn();
	}
</script>

M_SSY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击div之外的元素隐藏div（一）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery-1.9.1.min.js" type="text/javascript&quot
复制链接

扫一扫

专栏目录