如果 div 未隐藏，请单击任意位置隐藏 [重复]答案

【问题标题】：If div is not hidden click anywhere to hide [duplicate]如果 div 未隐藏，请单击任意位置隐藏 [重复]
【发布时间】：2013-06-08 03:28:40
【问题描述】：

我正在尝试默认隐藏 div 并通过单击按钮显示。要关闭 div，我可以单击按钮或屏幕上的任何其他位置。以下是我的尝试，但关闭部分不起作用。如果有人能指出正确的实现或更好的方法，我将不胜感激。

$('#theDiv').hide();

$("#showDivBtn").click(function(){
  $("#theDiv").show();
});

if ( !$('#theDiv:hidden') ) {

$(document).click(function() {
    $('#theDiv').hide();
});
$('#theDiv').click(function(e) {
    e.stopPropagation(); 
    return false;        
});

}

});

【问题讨论】：

我认为您最好设置一个包含一些 HTML 的 jsfiddle。
另外，“不工作”到底是什么意思？
好吧 theDiv 在加载时是隐藏的，我可以通过单击“showDivBtn”来显示它，但我目前无法隐藏它。我将添加一个 jfiddle 示例。
您同时引用了#theDiv 和.theDiv。我猜其中一个是错误的？
是的，他们都应该是 id，修复它。不过，这不是主要问题。

标签： javascript jquery

【解决方案1】：

将整个事件处理程序放在一个条件中只检查第一次页面加载时的条件，并且事件处理程序可能永远不会附加，而是这样尝试：

$('#theDiv').hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('#showDivBtn').length ) {
        $("#theDiv").show();
    }else if ( ! $(e.target).closest('#theDiv').length ) {
        $('#theDiv').hide();
    }
});

FIDDLE

【讨论】：

感谢您的回答，我在 jsfiddle 中插入了它似乎有错误，我不清楚为什么很难。 jsfiddle.net/smLPp
@Poyi - 改变它，看看是否有效
完美就是我想要的。谢谢！
@Poyi 这在带有内容的实际页面中不起作用。您不能单击屏幕上的任何位置来隐藏 DIV。您只能单击没有任何其他元素的位置。这就是为什么您不能在 document 元素上侦听点击处理程序的原因...如果您点击了另一个元素，则该元素将获得点击事件，而不是 document。
@Ghodmode - 当然可以，事件会一直冒泡到文档级别，因此单击文档中的任何元素都会触发事件处理程序。这就是委托事件处理程序的可能方式？

【解决方案2】：

试试这个，

$('#theDiv').hide();

    $("#showDivBtn").click(function(){
      $("#theDiv").toggle();
    });

    $(document).on("click" , function(event){

    if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
    {
    $('#theDiv').hide();
    }
    });

【讨论】：

【解决方案3】：

尝试使用

if( !$('.theDiv' ).is( ':visible' ) )

而不是

if ( !$('.theDiv:hidden') )

【讨论】：

【解决方案4】：

试试这个

    <script type="text/javascript">
    $('.opendiv').hide();
    $(document).click(function (event) {
        var $target = $(event.target);
        if ($target.attr('id') == 'addAccordion') {
            if ($('.opendiv').is(':hidden')) {
                $('.opendiv').show();
            }
            else {
                $('.opendiv').hide();
            }
        }
        else if ($target.closest('.opendiv').length > 0) {

        }
        else {
            $('.opendiv').hide();

        }

    })
</script>
 <div>
    <input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
            www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</div>

【讨论】：

【解决方案5】：

我认为您不能使用这样的 .click 处理程序来定位 document。

与其使您可以从字面上单击任意位置来关闭 DIV，不如让它看起来像这样。在您希望能够关闭的DIV后面放置一个清晰的DIV并使其覆盖整个屏幕。然后你可以将你的点击处理程序附加到那个。

HTML：

<button>Click me to show the DIV</button>
<div class="container">
    <div class="thediv">
        <p>I'm the DIV</p>
    </div>
</div>

JavaScript：

$(document).ready(function () {
    var $button = $("button");
    var $container = $("div.container");
    $button.click(function () {
        $container.show();
    });
    $container.click(function () {
        $container.hide();
    });
});

CSS：

div.container {
    display: none;
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
}
div.thediv {
    position: absolute;
    top: 30%;
    left: 10%;
    background-color: gray;
    color: white;
    padding-top: 1em;
    border-radius: 5px;
    width: 50%;
}
p {
    background-color: black;
    text-align: center;
    padding: 2em;
}

出于演示目的，我使背景 DIV 在this Fiddle 中可见

【讨论】：