15

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

}

});
4

5 回答 5

21

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

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

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

小提琴

于 2013-06-12T05:46:48.003 回答
1

尝试这个，

$('#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();
    }
    });
于 2013-06-12T07:08:13.380 回答
0

我不认为你可以document用这样的.click处理程序来定位。

与其让你可以从字面上单击任何地方来关闭 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 在此 Fiddle中可见

于 2013-06-12T06:37:51.777 回答
0

尝试使用

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

代替

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

于 2013-06-12T05:58:09.450 回答
0

尝试这个

    <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>
于 2013-06-12T06:06:47.647 回答