Jquery select all elements except the 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 try to call a function when the user clicks on everything else except #sub_menu_area . I am using the following part of js:

 $('*').not('#submenu_area').click(function(){ if(slide == "open"){ $('#sliding_menu_area').toggle(effect); slide = "close"; } }); 

Unfortunately, the children are somehow not excluded, and by clicking it, it switches many times. Does anyone know how to do this? :)

EDIT: So I need a jquery selector to work correctly: on click of all elements of body EXCEPT for #submenu_area and its descendants .

+7
source share
2 answers

Try the following:

 $(document).click(function(e) { if ($(e.target).is('#submenu_area, #submenu_area *')) { return; } if(slide == "open"){ $('#sliding_menu_area').toggle(effect); slide = "close"; } }); 
+16
source

Use this:

 $('*').not("#submenu_area *").click(function() { ... }); 
+4
source

All Articles