jquery - 单击外部时无法隐藏某个div

Question

我正在寻找一种方法来隐藏默认情况下已经隐藏的切换 div。如果用户单击它之外，我想隐藏 div！

我试过这个：

<script> 
  $(document).ready(function(){ 
     $("#tab").hide();
     $("#open_tab").on("click",function(){
        $("#tab").toggle();    
        $("*").on("mouseup",function(e){
              var clicked=$(this).attr("id");
              if(clicked !="tab"){
                 e.stopPropagation();
                 $("#tab").hide();
              }
             else {
                   e.stopPropagation();
             }
        });
     });
}); </script>

但我不知道我的代码有什么问题。请问有人可以帮忙吗？

Answer 1

您的mouseup活动仅在click活动上注册open_tab。您应该将此块移到$("#open_tab").on("click",function(). 请尝试以下方法：

<script> 
  $(document).ready(function(){ 
     $("#tab").hide();
     $("#open_tab").on("click",function(){
        $("#tab").toggle();    
     });

     $("*").on("mouseup",function(e){
          var clicked=$(this).attr("id");
          if(clicked !="tab"){
              e.stopPropagation();
              $("#tab").hide();
          } else {
              e.stopPropagation();
          }
     });
}); 
</script>

更新：这是一个较短的版本：

<script>
    $("#tab").hide();
    $(document).on('click', function (evt) {
        if (evt.target.id == 'open_tab') {
            $('#tab').toggle();
        } else if (evt.target.id != 'tab') {
            $('#tab').hide();
        }
    });
</script>

Answer 2

toggle()jQuery函数：

显示或隐藏匹配的元素。（文档）

所以，你不需要任何mouseup事件。只需使用toggle()功能on clickfor #open_tab。

HTML

<div id="open_tab">Click</div>
<div id="tab">TOGGLE</div>

Javascript

$("#tab").hide();
$("#open_tab").on("click", function () {
    $("#tab").toggle();
});

JSFIDDLE