如何通过jquery隐藏外部单击的div (内部div除外)
如何通过jquery隐藏外部单击的div (内部div除外)
提问于 2017-03-17 04:53:07
这只是一个示例代码，我希望用id="img“按钮点击隐藏div，以及用id="img”隐藏div。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img">
<button id"imgoption"> click here</butoon>
</div>这里是脚本
<script>
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( ! $(e.target).closest('#img').length ){
$('#imgoption').hide();
}
if ( $(e.target).closest('#img').length ) {
$("#imgoption").show();
}
});
}):
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-03-17 05:13:53
为此目的使用mouseup。
$(document).mouseup(function(e) {
var container = $("#img");
var con = $("#imgoption");
if (!container.is(e.target))
container.hide();
if (con.is(e.target))
container.parents().hide();
});div {
width: 100px;
margin: auto;
border: 3px solid;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img">
<button id "imgoption"> click here</butoon>
</div>
Stack Overflow用户
发布于 2017-03-17 05:05:53
我认为您使用像.parent()或.parents()这样的相对选择器来从$("imgoption")单击事件中遍历您的区域。
$("#imgoption").click(function () {
$(this).parents("#img").hide();
//you can technically do $(this).parent().hide(), but if you add more dom, the former is more bullet proof.
})div#img {
padding:40px;
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- NOTE: I did fix typos from your example -->
<div id="img">
<button id="imgoption"> click here</button>
</div>
免责声明:如果这不是你的意思，就留下评论吧。
Stack Overflow用户
发布于 2017-03-17 04:56:41
像这样使用：
<script>
$(document).on('click', function(e) {
if ( ! $(e.target).closest('#img').length ){
$('#img').hide();
//or
$('#img').parent().hide();
}
if ( $(e.target).closest('#img').length ) {
$("#img").show();
//or
$('#img').parent().show();
}
});
}):
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42849465
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号