如何通过jquery隐藏div外部的div除了div之外的div

This is just a sample code where i want hide div with id="img" on button click as well as outside div with with id="img"

这只是一个示例代码,我想要在按钮点击时使用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>

Here os the Script

这是脚本

<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 个解决方案

#1

Use mouseup for this purpose.

为此目的使用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>

#2

I think you use relative selectors like .parent() or .parents() in order to traverse your dom from the $("imgoption") click event.

我认为你使用相对选择器,如.parent()或.parents(),以便从$(“imgoption”)点击事件中遍历你的dom。

$("#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>

Disclaimer: If this isn't what you meant, just leave a comment.

免责声明:如果这不是您的意思,请发表评论。

#3

use like this:

像这样使用:

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

#1