jquery select all elements except a div and its children
I have this html/css code:
<body>
<!-- BEGIN: HEADER AREA -->
<?php require("snippets/header_area.php"); ?>
<!-- END: HEADER AREA -->
<div id = "presentation_area">
<div id = "submenu_area">
<div id = "sliding_menu_area">
</div>
<div id = "tags">
<div id = "1">
<img src = "lang/el/images/1.png" />
</div>
<div id = "2">
<img src = "lang/el/images/2.png" />
</div>
<div id = "3">
<img src = "lang/el/images/3.png" />
</div>
<div id = "4">
<img src = "lang/el/images/4.png" />
</div>
</div>
</div>
</div>
</body>
I am trying to trigger a function when the user clicks on everything else except for the #sub_menu_area. I use the following part of js:
$('*').not('#submenu_area').click(function(){
if(slide == "open"){
$('#sliding_menu_area').toggle(effect);
slide = "close";
}
});
Unfortunately the children somehow are not excluded and on click it toggles a lot of times. Does anyone know how to do it properly?! :)
EDIT:
So what I need is a jquery selector to get properly: on click of all elements of body EXCEPT for #submenu_area and its descendants.
Answer
Try this:
$(document).click(function(e) {
if ($(e.target).is('#submenu_area, #submenu_area *')) {
return;
}
if(slide == "open"){
$('#sliding_menu_area').toggle(effect);
slide = "close";
}
});