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结构错了...... ＆lt; li＆gt; 应该是＆lt; ul＆gt; 的孩子

 <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>

工作小提琴==＆gt; https://jsfiddle.net/osd4nn1n/

Answer 2

您可以将toggleClass更改为仅切换以隐藏元素。要获得您喜欢的行为，请将您的jQuery选择器更改为：

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

关闭jQuery响应菜单onclick菜单项？

2 个答案: