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

Question

正如标题所说。

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

但是一旦打开菜单，当您单击任何导航链接时，无论 screen-size/device 是什么，菜单都不会关闭。

我试过删除这部分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>

Answer 2

为移动设备更改如下代码：

$(document).on('click touchstart', function () {

为 iphone 尝试以下 css :

<style>
    .nav-link
    {
         cursor: pointer;
    }
</style>

查看 link $(document).click() not working correctly on iPhone. jquery 了解更多详情。

Answer 3

var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    menu.toggleClass();
  });

  $(".nav-link").on('click',function(e){
  menu.toggleClass();
})

.menu{
  visibility:hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-btn">

        <span class="lines">Nav</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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      </div>

不太确定您的需求。据我了解，您想单击按钮以显示菜单。单击导航项重定向到特定页面并隐藏菜单。

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

Toggle Menu won't close on nav click

javascript

jquery

menu