單擊下拉菜單外部時關閉下拉菜單

Question

我的網站上的導航下拉菜單出現問題，我幾乎已解決，但無法完全修復。 我擔心我可能只是把我的代碼弄得一團糟。

當我通過 preventDefault 事件引入“滾動到錨點標簽”功能時，它破壞了我的導航菜單。 除非您再次單擊菜單按鈕，否則菜單不會關閉。 在您單擊其中一個鏈接后，我終於將其關閉，但這是現在關閉它的唯一方法。 單擊菜單按鈕或網站上的任何其他地方時如何關閉它？ 我確信 jQuery 的一點是罪魁禍首，但不知道如何修復它或解決它。

菜單的 HTML：

  <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>

以及相關的 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();
  });
});

這是一個潛在的問題，它搞砸了其他功能。

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

我到底應該怎么做才能修復我的菜單？

您可以在http://idpdx.kreigd.com 上查看正在進行的站點

更新：我想我已經在事情變得混亂的地方有了線索。 我用來添加下拉功能的函數要求在單擊 .dropbtn 元素后添加“show”類，並在再次單擊時將其刪除。

所以我真正需要做的是重新編寫代碼，以便單擊 .dropbtn 打開下拉菜單，然后單擊其他任何內容，包括導航按鈕和 .dropbtn 元素，將關閉它。

更新 2：嘗試不同的方法。 忽略第一次更新。

Answer 1

試試這個並讓我知道

$(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.
});

Answer 2

你可以試試這樣的

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

我嘗試了您網站上的代碼，但您在 window.click 上編寫了一些代碼，這導致了問題。

Answer 3

@Nikhil 的回答讓我更進一步，但也有缺點。 我想出了以下解決方案：

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