单击菜单项后关闭响应式菜单

Question

我有这个用于基本（打开/关闭）菜单移动的自定义 js 代码，当我在多页网站上使用它时非常棒，但它只会在您单击菜单符号时关闭菜单。现在我需要将它实现到一个单页网站中，并且我需要在用户点击菜单项后关闭它。我在 javascript 方面的经验很少，所以我需要帮助解决这个问题。

js:

$(document).ready(function() {
    var n = '#nav', no = 'nav-open';
    $('#nav-menu').click(function() {
        if ($(n).hasClass(no)) {
            $(n).animate({height:0},300);
            setTimeout(function() {
                $(n).removeClass(no).removeAttr('style');
            },320);
        }
        else {
            var newH = $(n).css('height','auto').height();
            $(n).height(0).animate({height:newH},300);
            setTimeout(function() {
                $(n).addClass(no).removeAttr('style');
            },320);
        }
    });
});

HTML：

<!-- Navigation Bar -->
<div class="nav-hold">
  <div class="nav-bar"> 
    <a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
    <a href="#one" class="nav-logo-text">Company name</a>
    <a id="nav-menu" class="nav-menu-symbol">&#9776;<!-- menu symbol --></a>
    <a class="nav-menu">Menu</a>
    <ul class="nav-list" id="nav">
      <li><a href="#one">Top</a></li>
      <li><a href="#two">About us</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Portfolio</a></li>
      <li><a href="#five">Contact</a></li>
    </ul>
  </div>
</div>
</div>

Answer 1

改变

$('#nav-menu').click(function() {

如果您希望仅通过单击 li 元素来关闭菜单

$('#nav li').click(function() {

或者如果你想用 li 和菜单图标关闭菜单

$('#nav-menu, #nav li').click(function() {

Answer 2

那是因为您只将点击功能绑定到菜单符号。我不确定为什么要将符号和文本分开，但我更愿意将其包装在单个元素中。您也可以使用 jQuery slideToggle() 在点击时向下或向上滑动。示例：

$(document).ready(function() {
    $('#nav-menu').click(function() {
      $('#nav').slideToggle(300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
  <div class="nav-bar"> 
    <a href="#one" class="nav-logo"><img src="images/logo.png" alt="logo" /></a>
    <a href="#one" class="nav-logo-text">Company name</a>
    <a id="nav-menu" class="nav-menu-symbol">
      <span>&#9776;</span>
      <span>Menu</span>
    </a>
    <ul class="nav-list" id="nav">
      <li><a href="#one">Top</a></li>
      <li><a href="#two">About us</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Portfolio</a></li>
      <li><a href="#five">Contact</a></li>
    </ul>
  </div>
</div>
</div>