JQuery, how to make div disappear when clicked anywhere out of it? - html

Question

I am trying to achieve the following behavior:
When link "Option" with DivA id is clicked, the DivB should show up with fade in effect. If I click the link "Option" again as well as if clicked anywhere else in the page except of the DivB inside, the DivB should dissapear again.
This is my HTML code:
Option
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
This is my JQuery code. It is wrong, if the DivB is hidden and I click anywhere in the document, the DivB appears.
<script type="text/javascript">
$(document).click(function () {
$("#DivB").fadeToggle("200");
});
$("#DivA").click(function () {
e.stopPropagation();
return false;
});
</script>
Where's the mistake? Thanks for help.

Answer 1

Live Demo
$(function() {
$(document).on("click",function (e) {
if (e.target.id=="DivA") {
$("#DivB").fadeToggle(200);
e.stopPropagation();
return false;
}
else if ($("#DivB").is(":visible")) {
$("#DivB").fadeOut(200);
}
});
});

Answer 2

<script>
$(document).on('click', function( evt ) {
evt.stopPropagation();
if ( evt.target.id == 'DivA' || $('#DivB').is(':visible'))
$('#DivB').fadeToggle();
});
</script>
Fiddle: http://jsfiddle.net/nR6e3/1/

Answer 3

$(document).on("click",function () {
if ($("#DivB").is(":visible")){
$("#DivB").fadeOut(200);
}
});
$("#DivA").click(function (e) { // you need place 'e'(for event handling)
$("#DivB").fadeIn(200);
e.stopPropagation();
return false;
});

Answer 4

$(document).mouseup(function(e) {
var container = $("your selector here");
// if the target of the click not the container or not a descendant of that container
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});