javascript - 切换菜单不会在导航单击时关闭

Question

如标题所示。

菜单按预期打开，如果单击“关闭”按钮，菜单将按预期关闭。

但是一旦菜单打开，当您单击任何导航链接时，无论屏幕尺寸/设备如何，菜单都不会关闭。

我尝试删除这部分if (windowWidth <= 767) {但这没有什么区别。

有什么建议吗？

/*===============================================
    Toggle Menu
  ===============================================*/
  var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    if (menu.hasClass("show-menu")) {
      menu.removeClass("show-menu");
    }
    else {
      menu.addClass("show-menu");
    }
    e.stopPropagation();
  });

  // Navicon transform into X //
  toggleBtn.on("click", function() {
    if (toggleBtn.hasClass("toggle-close")) {
      toggleBtn.removeClass("toggle-close");
    }
    else {
      toggleBtn.addClass("toggle-close");
    }
  });

  // Close Menu
  if (windowWidth <= 767) {
    $(document).on("click", function() {
      if (menu.hasClass("show-menu")) {
        menu.removeClass("show-menu");
      }
      if (toggleBtn.hasClass("toggle-close")) {
        toggleBtn.removeClass("toggle-close");
      }

    });
  }

这是 html:

  <!-- Toggle Menu -->
      <button class="toggle-btn">
        <span class="lines"></span>
      </button>
      <div class="menu">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#education">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#experience">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonial">Personality</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- end Toggle menu -->

Answer 1

你说你已经尝试过没有if (windowWidth <= 767)但它没有起作用。好吧，我所做的就是删除这个 if现在可以了。您可能已经或曾经有另一个错误，该错误曾经或正在阻止其正常工作。

/*===============================================
    Toggle Menu
  ===============================================*/
  var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    if (menu.hasClass("show-menu")) {
      menu.removeClass("show-menu");
    }
    else {
      menu.addClass("show-menu");
    }
    e.stopPropagation();
  });

  // Navicon transform into X //
  toggleBtn.on("click", function() {
    if (toggleBtn.hasClass("toggle-close")) {
      toggleBtn.removeClass("toggle-close");
    }
    else {
      toggleBtn.addClass("toggle-close");
    }
  });

  // Close Menu
  //if (window.width <= 767) {  <-- does not work with this
    $(document).on("click", function() {
      if (menu.hasClass("show-menu")) {
        menu.removeClass("show-menu");
      }
      if (toggleBtn.hasClass("toggle-close")) {
        toggleBtn.removeClass("toggle-close");
      }

    });
  //}

.menu {
  display: none;
}

.show-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-btn">
        Toggle
      </button>
      <div class="menu">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#education">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#experience">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonial">Personality</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>