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

toggle() jQuery函数：

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

因此，您不需要任何mouseup事件。只需将toggle()函数on click用于#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

Answer 2

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

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

2 个答案:

HTML

的Javascript