title: Javascript Jquery Dropdown hides on whitespace, however it breaks the dropdown until refresh
body: <pre><code>$('button.dropnav-toggle').on('click', function(e) {
              $('#parent-dropnav').toggleClass('parent-open');
              $('.not-header').on('click', function(e) {
              if (!$(event.target).closest('.drop-menu').length) {
                  $('.drop-menu').hide();
              };
          });
          });
  </code></pre>
  
  <p>I have a dropdown hamburger with bootstrap. This code works for the most part, however I'm running into a wall. It successfully drops down and becomes hidden when clicking on anything besides the header. After clicking off the dropdown it successfully hides, however the only way to be able to click and have it dropdown again is after a page refresh.</p>