導航菜單不會在切換菜單上關閉

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> 

Answer 2

 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> 

不太確定您的需求。 據我了解，您想單擊該按鈕以顯示菜單。 單擊導航項以重定向到特定頁面並隱藏菜單。

Answer 3

如下更改移動代碼：

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

嘗試以下iPhone的CSS：

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

檢查鏈接$（document）.click（）在iPhone上無法正常工作。 jQuery的更多細節。