Close dropdown menu when clicking outside of it
<p>I've got a problem with the navigation dropdown on my site that I've almost solved but can't quite fix. I'm worried I may have just made a mess out of my code.</p>

<p>When I introduced a "scroll to anchor tags" function with a preventDefault event, it broke my nav menu. The menu wouldn't close unless you clicked on the menu button again. I've finally got it to close after you click one of the links, but that's now the only way to close it. How do I have it close when clicking on the menu button or anywhere else on the site? I'm sure that bit of jQuery is the culprit, but don't know how to fix it or work around it.</p>

<p>HTML for the menu:</p>

<pre><code>  &lt;div class="main-nav navbtn"&gt;
    &lt;div class="dropdown"&gt;&lt;i onclick="myFunction()" class="dropbtn material-icons md-48"&gt;&amp;#xE5D2;&lt;/i&gt;
      &lt;div id="myDropdown" class="dropdown-content"&gt;
        &lt;a href="#home" class="home navlink"&gt;Home&lt;/a&gt;
        &lt;a href="#about" class="navlink"&gt;About&lt;/a&gt;
        &lt;a href="#services" class="navlink"&gt;Services&lt;/a&gt;
        &lt;a href="#work" class="navlink"&gt;Work&lt;/a&gt;
        &lt;a href="#testimonials" class="navlink"&gt;Testimonials&lt;/a&gt;
        &lt;a href="#contact" class="navlink"&gt;Contact&lt;/a&gt;
        &lt;a href="http://blog.ignitiondesignpdx.com" target="_blank" class="external navlink"&gt;Blog&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>And the related jQuery:</p>

<pre><code>// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
 document.getElementById("myDropdown").classList.toggle("show");
}

//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
  if (!event.target.matches('.dropbtn')) {
    dropdowns.forEach(function (openDropdown) {
      dropdown.classList.contains('show') &amp;&amp; dropdown.classList.remove('show');
    });
   }
 };

////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
  $('.dropbtn').on('click', function () {
    $(".dropdown-content").show();
  });
  $('.navlink').on('click', function () {
    $(".dropdown-content").hide();
  });
});
</code></pre>

<p>This is the potential problem that's screwing the other functions up.</p>

<pre><code>//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

var $root = $('html, body');
$('a').click(function () {
  $root.animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
  return false;
});
</code></pre>

<p>What in the world should I do to fix my menu?</p>

<p>You can take a look at the work-in-progress site at <a href="http://idpdx.kreigd.com" rel="nofollow noreferrer">http://idpdx.kreigd.com</a></p>

<p>Update: I think I've got a lead on where things are getting confused. The function I'm using to add the dropdown functionality requires that the class "show" be added once the .dropbtn element is clicked, and removed when it is clicked again.</p>

<p>So what I really need to do is rework the code so that clicking .dropbtn opens the dropdown, and clicking on anything else, including the nav buttons and the .dropbtn element, will close it.</p>

<p>Update 2: Trying a different method. Ignore that first update.</p>