關閉菜單項的jQuery響應式菜單onclick？

Question

我有一個使用jQuery的簡單打開/關閉響應菜單。 菜單工作正常，但我使用的網站是一個簡單的單頁網站，具有不同的部分。 我的問題是，當用戶單擊菜單句柄時，菜單會打開和關閉，而我也希望在用戶單擊菜單項時也能關閉菜單。 我在jQuery方面的經驗很少，因此我需要幫助解決此問題。

HTML：

  <nav>
    <ul>
      <a href="#home"><li>home</li></a>
      <a href="#about"><li>about</li></a>
      <a href="#contact"><li>contact</li></a>
    </ul>
    <div class="handle">Menu</div>
  </nav>

jQuery：

$('.handle').on('click', function(){
  $('nav ul').toggleClass('showing');
});

謝謝。

Answer 1

我認為您需要這樣做：

$('.handle').on('click', function(){
  $('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
    $('nav ul').removeClass('showing');
});

我還注意到您的HTML結構是錯誤的... <li>應該是<ul>的子元素

 <nav>
     <ul>
         <li><a href="#home">home</a></li>
         <li><a href="#about">about</a></li>
         <li><a href="#contact">contact</a></li>
     </ul>
     <div class="handle">Menu</div>
 </nav>

工作提琴==> https://jsfiddle.net/osd4nn1n/

Answer 2

您可以將toggleClass更改為僅切換即可隱藏元素。 要獲得所需的行為，請將jQuery選擇器更改為：

$('.handle, nav ul a').on('click', function(){
  $('nav ul').toggle();
});