Question

我有一个按钮，当它被点击时，会显示一个带有图像的div（如聊天的表情符号面板）如果我再次点击它会隐藏div，但我想要做的是：如果div已经出现，然后我点击页面的任何其他东西，我想隐藏它。我试过这个：

$("myBtn").click(function(){
    // show div
});

$(document).click(function(){
// hide div
});

单击“myBtn”时，div会自动显示并隐藏。我该怎么办呢？

感谢您的时间。

Answer 1

您可以尝试以下方法：

$(document).on('click', function(evt) {
    if(!$(evt.target).is('#my-id')) {
        //Hide
    }
});

<强>更新

这样你就可以拥有一套完整的工作集：

$('#mybutton').on('click', function(evt) {
    $('#mydiv').show();
    return false;//Returning false prevents the event from continuing up the chain
});

Answer 2

在您展示原始<div>的同时，在您的页面中添加一个新的<div>，其样式/ css设置如下：

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

确保原始的<div> - 您希望能够在不关闭的情况下点击它 - 具有更高的z-index，但页面上的其他所有内容都具有较低的z-index

当您将新div添加到页面时，请为其指定.ui-widget-overlay类，并添加点击处理程序以拦截<div>的点击次数。使用单击处理程序添加overlay div如下所示：

$('<div class="ui-widget-overlay">')
    .click(function() {
        $('.ui-widget-overlay').remove();
        $('selector-for-original-div').hide();
    })
    .appendTo('body');

所有这一切的结果：你有两个div。第一个是你想要显示的内容，允许用户点击而不关闭它，第二个是第一个占用整个浏览器窗口的不可见的div，这样如果用户点击除了上部div之外的任何地方，它就会拦截click事件。在该click事件中，您删除隐藏的div并隐藏原始。

Answer 3

更新

假设您在元素显示时有一个“活动”类，它将是：

$('html').click(function(e){

  if(!$(e.target).attr("id") == "my-id") { 

  }

});

Answer 4

<script type="text/javascript">
  $('body').click(function() {
   if($("div").is(':visible')){
    $("div").hide();
   }
  });
</script>

此处的$（“div”）选择器应该是您的div，例如，如果<div class="class" id="id">然后将$("div") $("div.class")更改为$("div#id")或{ {1}}

Answer 5

<div class="slControlWrapper">
    <div class="slControlLabel">
        <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
    </div>
    <div class="slControlSeparator">

    </div>
    <div class="slControlDropDown">

    </div>
     <div id="wndSL">
        This is the hidden content of my DIV Window
    </div>
    <div id="test">
    I am for test click on me
    </div>
</div>


 $('.slControlLabel, .slControlDropDown').bind('click',function(event){

   $('#wndSL').show(); 
 event.stopPropagation();
 });


$('html').click(function() {
   $('#wndSL').hide(); 
});


    #wndSL {

display:none;     background-color: blue;    height:500px;    width:590px;
}

在这里有一个雄鹅：

http://jsfiddle.net/nCZmz/26/

如何在jquery中捕获任何click事件

5 个答案: