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