JS或JQuery点击其他地方关闭弹出元素,但是点击元素却不会关闭的代码怎么写?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS或JQuery点击其他地方关闭弹出元素,但是点击元素却不会关闭的代码怎么写?相关的知识,希望对你有一定的参考价值。
如图,第一步点击输入框弹出2号弹出层,点击任意空白或元素,关闭2号弹出层,但是点击2号弹出层自身内容却不会关闭2号弹出层。求代码
给你一个简单的示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script>
$(function()
$('#btn').click(function()
$('#box').css('display','block');
);
$(document).on('mousedown',function(e)
if(!$(e.target).is($('#btn')) && !$(e.target).is($('#box')) && $(e.target).parent('#box').length === 0)
$('#box').css('display','none');
);
);
</script>
</head>
<body>
<button id="btn">显示</button>
<div style="display:none; width:200px; height:200px; background-color:#ddd;" id="box">
<div>内层的文字</div>
</div>
</body>
</html> 参考技术A
2号弹出层的id是layer2
$('*').on('click',function()if('layer2'!=$(this).attr('id'))
$('#layer2').css('display','none')
)
以上是关于JS或JQuery点击其他地方关闭弹出元素,但是点击元素却不会关闭的代码怎么写?的主要内容,如果未能解决你的问题,请参考以下文章