title: restrict click logic to parent li tag
body: <p>I have the following structure for a mobile menu.</p>
  
  <pre><code>&lt;nav id="mobile-menu" class="fa fa-bars"&gt;
      &lt;ul id="#menu-header-menu-mobi" class="menu" style="display: block;"&gt;
          &lt;li id="menu-item-27-mobi" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-27"&gt;&lt;a href="javascript:;"&gt;About Us&lt;/a&gt;
  
              &lt;ul class="sub-menu"&gt;
                  &lt;li id="menu-item-24-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=4"&gt;Our Environment&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="menu-item-25-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=6"&gt;Our History&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="menu-item-23-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=8"&gt;Executive Team&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="menu-item-22-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=10"&gt;Core Values&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-28-mobi" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28"&gt;&lt;a&gt;Companies&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li id="menu-item-20-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=12"&gt;Careers&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-19-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=16"&gt;Blog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-21-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"&gt;&lt;a href="http://localhost/Sites/wp/?page_id=14"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I then have the following javascript to open and close the menu item that has children.</p>
  
  <pre><code>$("#header nav#mobile-menu li.menu-item-has-children").on("click", function (event) {
      event.preventDefault();
      var t = $(this);
      var sub = t.children("ul.sub-menu");
      if (sub.hasClass("open")) {
          sub.removeClass("open");
      } else {
          sub.addClass("open");
      }
      return false;
  });
  </code></pre>
  
  <p>This works but the problem is that when I click a child item, this script is run again because the child item is contained within the parent li tag.  Is there a way I can rework this to get the same functionality but still have the links in the child li tags work?  Thanks.</p>