title: Hide element if click target is not itself or its children using jQuery
body: <p>I am having a bit of an issue with showing and hiding a menu using jQuery. What I am trying to do is:</p>
  
  <p>If a button is pressed, then show a menu div. If the somewhere other than the div is clicked, hide the menu div.</p>
  
  <p>Here's where my issue comes in. The above works perfectly, but when you click on an element which is inside of the div, the menu is hidden, which is not my intended outcome. My code is as follows:</p>
  
  <pre><code>$(document).ready(function() {
      $(document).click(function(e) {
          if (e.target.id != "projectEdit") {
              if (e.target.id != "projectEditMenu") {
                  $("#projectEditMenu").hide();
              }
          } else {
              $("#projectEditMenu").show();
          }
      });
  });
  </code></pre>
  
  <p>How can I make it so that if the children of the menu div were excluded from this argument, it keeps the menu open if the children are clicked on?</p>
  
  <p>HTML code:</p>
  
  
  
  <pre><code>    &lt;div id="projectEditMenu"&gt;
  
          &lt;div id="projectEditMenuMarker"&gt;&lt;/div&gt;
  
          &lt;div id="projectEditMenuAddTile"&gt;
  
              &lt;span id="projectEditMenuAddTileTitle"&gt;Add Tile&lt;/span&gt;
  
              &lt;form id="newTileForm" action="openProject.php" method="put" hidden&gt;&lt;/form&gt;
  
              &lt;input form="newTileForm" type="text" name="newTileName" id="newTileNameInput" placeholder="Tile Name"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>