title: Prevent drop down from closing onclick after letting go of mouse key
body: <p>I have a drop down menu that was a hover on drop down menu.  I changed the hover portion of the css to active and changed the hover to click in the script.</p>
  <pre><code>$(document).ready(function () {
      $('header li.full-width').click(function () {
          $('.site-content').addClass('overlay');
  
      });
  
      // Reveal/Hide Mobile sub menus.
      $('body .main-navigation ul.menu &gt; li.menu-item-has-children &gt; .caret').on('click', function (e) {
          $(this).closest('li').toggleClass('dropdown-open');
          e.preventDefault();
      });
  });
  </code></pre>
  <p>I was able to obtain the open on click functionality but it only stays open while I am pressing in the mousekey.  As soon as I depress the mouse button the menu closes.</p>
  <p>How can I get it to stay open on click and only close when I click again.</p>