jq 实现点击按钮出现div，点击空白又消失，点击要显示的元素不隐藏

最新推荐文章于 2023-01-31 11:39:10 发布

sinat_29326171

最新推荐文章于 2023-01-31 11:39:10 发布

阅读量811

点赞数

分类专栏： jQuery javascript

本文链接：https://blog.csdn.net/sinat_29326171/article/details/111678890

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

用 javascript 实现；https://blog.csdn.net/weixin_43853424/article/details/85320029

<!DOCTYPE html>
<html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.oDiv{
				width: 200px;
				height: 300px;
				background-color: #BCBCBC;
				display: none;
			}
    </style>
		</style>
	</head>
	<body>
		<button class="bt">按钮</button>
		<div class="oDiv"></div>
		<script>
			
			var But=$('.bt')
			var oDiv=$('.oDiv')			
			$('.bt').click(function(e){					
				$('.oDiv').toggle()
				e.stopPropagation();  //阻止冒泡
				
			})
			// 点击空白消失
			$(document).click(function(e){		
    
			    if( !oDiv.is(e.target)  ){
			    	oDiv.hide()
			    }				
			})
			
			
			
		</script>
	</body>
</html>

sinat_29326171

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 实现点击按钮出现div，点击空白又消失，点击要显示的元素不隐藏

用 javascript 实现；https://blog.csdn.net/weixin_43853424/article/details/85320029<!DOCTYPE html><html><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <head> <meta charset="utf-8"> <
复制链接

扫一扫

专栏目录