Question

我正在尝试默认隐藏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;        
});

}

});

Answer 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

Answer 2

尝试使用

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

而不是

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

Answer 3

试试这个

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

Answer 4

我认为您不能使用document这样的.click处理程序定位<button>Click me to show the DIV</button> <div class="container"> <div class="thediv"> <p>I'm the DIV</p> </div> </div>。

而不是这样做，你可以点击任何地方关闭DIV，只是让它看起来那样。将一个清晰的DIV放在你想要关闭的DIV后面并使其覆盖整个屏幕。然后你可以将你的点击处理程序附加到那个。

HTML：

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

JavaScript的：

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;
}

CSS：

{{1}}

出于演示目的，我在this Fiddle

中显示了背景DIV

Answer 5

试试这个，

$('#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();
    }
    });

如果div未隐藏，请单击任意位置以隐藏

5 个答案: