Question

我试图在点击容器时隐藏div及其容器。

以下是我一直在尝试的内容：

HTML

<p>text to unhide</p>
<div id="container">
<div id="div"></div>
</div>

CSS

#container { z-index:2998; position:fixed; width:100%; height:100%; top:0; left:0; background: green; }
#div { z-index:2999; position:fixed; top:15%; left:10%; width:80%; height:70%; background: yellow; }
p { color:#000; text-align:center; font-size:25px; }

JS

$(document).ready(function()
{
$("#container").mouseup(function(e)
{
    var subject = $("#div"); 

    if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
    {
        subject.fadeOut();
    }
});
});

以下是演示：http://jsfiddle.net/7jzrd0zt/

实际上，可以隐藏黄色#div，但不能隐藏绿色#container。

如何解决这个问题？

Answer 1

而不是隐藏主题，您需要隐藏主题父母。

$(subject).parent().hide()

Answer 2

有一些解决方案，但由于您使用了ID并且标记很简单，因此您可以$("#container").fadeOut()代替subject.fadeOut()。

http://jsfiddle.net/7jzrd0zt/2/

由于您的听众正在聆听#container本身，您也可以$(this).fadeOut()。 this将引用侦听事件的元素。

Answer 3

检查目标是否不是主题。如果没有，您可以致电$(this).fadeOut()并隐藏容器（使用subject），并显示文字。

这是脚本：

$('#container').on('click', function(e) {
    var $subject = $('#div');
    if ($(e.target).is($subject) === false) {
        $(this).fadeOut();
    }
});

这是一个小提琴：http://jsfiddle.net/7jzrd0zt/4/

Answer 4

使用此代码隐藏和显示div

<p id='ptest'>text to unhide</p>
<div id="container">
<div id="div"></div>
</div>    

$(document).ready(function()
{
    $("#container").mouseup(function(e)
    {
        $("#container").hide();
    });
    $("#ptest").mouseup(function(e)
    {
        $("#container").show();
    });
});

如何在单击容器时隐藏div及其容器

4 个答案: