3

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

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

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

单击“myBtn”时，div 会自动显示和隐藏。我该如何解决？

感谢您的时间。

4

5 回答 5

16

您可以尝试以下方法：

$(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
});
于 2013-03-05T21:59:05.697 回答
1

在展示您的原始文件的同时<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>。使用点击处理程序添加覆盖 div 如下所示：

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

所有这一切的结果：你有两个 div。第一个是您要显示的内容并允许用户在不关闭它的情况下单击它，第二个是第一个下方的不可见 div 占据整个浏览器窗口，因此如果用户单击除上部 div 之外的任何位置，它会拦截单击事件. 在该单击事件中，您删除隐藏的 div 并隐藏原始 div。

于 2013-03-05T22:03:25.077 回答
0

更新

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

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

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

  }

});
于 2013-03-05T21:56:12.043 回答
0 
<script type="text/javascript">
  $('body').click(function() {
   if($("div").is(':visible')){
    $("div").hide();
   }
  });
</script>

此处的 $("div") 选择器应该是您的 div 或者具有 id 或 class 例如：如果<div class="class" id="id">then$("div")将更改为$("div.class")或$("div#id")

于 2013-03-05T21:58:30.933 回答
-1 
<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/

于 2013-03-05T21:58:33.757 回答