Javascript 如何通过jquery在除一个内部div之外的外部单击中隐藏div

这只是一个示例代码，我希望在单击按钮时使用id=“img”隐藏div，以及使用id=“img”隐藏外部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>

$（document）.on（'click'，函数（e）{//通过单击屏幕中的任何位置来隐藏div
if（！$（e.target）.最近（'#img'）.长度）{
$（'#imgoption'）.hide（）；
}
if（$（e.target）.最近（'#img'）.长度）{
$（“#imgoption”）.show（）；
}
});
}):

像这样使用：

<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>

$（文档）。在（'单击'）上，函数（e）{
if（！$（e.target）.最近（'#img'）.长度）{
$（'#img'）.hide（）；
//或
$（'#img'）.parent（）.hide（）；
}
if（$（e.target）.最近（'#img'）.长度）{
$（“#img”）.show（）；
//或
$（'#img'）.parent（）.show（）；
}
});
}):

我认为您可以使用相对选择器，如

.parent（）

或

.parents（）

，以便从

$（“imgoption”）

单击事件遍历dom

$（“#imgooption”）。单击（函数（）{
$（this.parents（“#img”）.hide（）；
//从技术上讲，您可以执行$（this.parent（）.hide（）），但如果添加更多dom，则前者更具防弹性。
})

div#img{
填充：40px；
背景颜色：蓝色；
}

点击这里

为此，请使用

鼠标


$（文档）.mouseup（函数（e）{
var容器=$（“#img”）；
var con=$（“#imgoption”）；
如果（！container.is（如目标））
container.hide（）；
如果（con.is（e.target））
container.parents（）.hide（）；
});
div{
宽度：100px；
保证金：自动；
边框：3倍实心；
高度：100px；
}

点击这里
您的问题我不清楚，预期结果是什么？当前结果是什么？名称单击此处我想要当我单击按钮时，它关闭将关闭主#img，当我从#img单击外部时，它将关闭主#img。到目前为止，一切正常，除了按钮点击没有隐藏，因为butoon在里面不一样，但除此之外，每当我在蓝色区域外点击时，我都希望它会隐藏，这就是你的意思？我在帖子中添加了新的片段。此外，我还添加了示例图像。如果一个单击事件嵌套在另一个单击事件中，则没有理由有两个单独的单击事件。我在上面找到了我的答案。经历一下……谢谢你
<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>