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点击其他地方关闭弹出元素,但是点击元素却不会关闭的代码怎么写?的主要内容,如果未能解决你的问题,请参考以下文章

点击除元素以外的任意地方隐藏元素js

点击除元素以外的任意地方隐藏元素js

jquery实现的点击页面其他地方隐藏显示的元素

一个弹出div,当点击页面上除了这个div这外的地方,隐藏这个div,jquery怎么写??

Jquery点击除了指定div元素其他地方,隐藏该div

在其他地方点击时关闭弹出视图控制器