点击

Question

我有一个下拉的javascript导航菜单。目前，仅当您按X或在菜单外单击时它才会关闭。我也想在用户点击菜单中的链接后关闭它。

这是html：

<nav>
    <div class="main-nav navbtn">
      <button onclick="myFunction()" class="c-hamburger c-hamburger--htx dropbtn">
        <span>toggle menu</span>
      </button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home" class="home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#contact">Contact</a>
      </div>
    </div>
  </nav>

这是javascript。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function (event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
     }
    }
   };

要使此功能发生，我需要做什么？谢谢！

编辑：如果有帮助的话，这里是滚动功能的代码。

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

Answer 1

getElementsByClassName返回NodeList，而不是Array。你只需要改变。 。

var dropdowns = document.getElementsByClassName("dropdown-content");

到。 。

var dropdowns = Array.from(document.getElementsByClassName("dropdown-content"));

你也可以使用更简洁的东西。 。

dropdowns.forEach(function (openDropdown) {
    dropdown.classList.contains('show') && dropdown.classList.remove('show');
});