Close dropdown menu when clicking outside of it

Question

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.

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.

HTML for the menu:

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

And the related jQuery:

// 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') && 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();
  });
});

This is the potential problem that's screwing the other functions up.

//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;
});

What in the world should I do to fix my menu?

You can take a look at the work-in-progress site at http://idpdx.kreigd.com

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.

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.

Update 2: Trying a different method. Ignore that first update.

Answer 1

@Nikhil's answer got me further but has it's downsides. I came up with the following solution:

    $(document).click(function (e) {
        var target = $(e.target);
        // check the actual element being clicked is not the dropdown trigger itself
        if (!target.hasClass('dropdown-trigger') && !target.closest('.dropdown-trigger').length) {
            // use the framework to close the dropdown instead of just hiding it: hiding it will require you to click the trigger 2 times to reopen!
            $('dropdown-trigger').dropdown('close');
        }
    });

Answer 2

you can try with something like this

$('body').not("#myDropdown").off('click').on('click',function(){$("#myDropdown").removeClass("show")});

I tried the code in your website but you have written some code on window.click which is causing issue.

Answer 3

Try this & let me know

$(document).click(function() {
    $(".dropdown-content").hide();
    // $(".dropdown-content").removeClass("show");
});

$(".dropdown-content").click(function(e) {
    e.stopPropagation(); // if you click on the div itself it will cancel the click event.
});