jquery select all elements except a div and its children

css, jquery, jquery-ui, selector, toggle

Solution

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";
        }
    });

Problem

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`.

Original source