Как скрыть div и его контейнер при щелчке по контейнеру

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

Есть несколько решений, но так как вы используете идентификаторы и разметка проста, вы можете просто сделать $("#container").fadeOut() вместо subject.fadeOut().

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

Поскольку слушатель прослушивает #container себя, вы также можете сделать $(this).fadeOut(). this будет ссылаться на элемент, прослушивающий событие.

Answer 3

Используйте этот код для скрытия и отображения 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(); 
    }); 
}); 

Answer 4

Проверьте, чтобы увидеть, если цель не является объектом. Если нет, вы можете позвонить $(this).fadeOut() и скрыть контейнер (с subject), показывая текст.

Вот сценарий:

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

А вот скрипка: http://jsfiddle.net/7jzrd0zt/4/