javascript - 选择链接后使下拉菜单消失

Question

我有以下用于下拉菜单的代码:

<header>
        <nav class="navbar"> 
            <div class="inner-wrapper">
              <a class="button" id="menu-button">Menu</a>
              <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#classes">Classes</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
        </nav>
</header>

header nav div ul {
    list-style: none;
    padding: 0;
    line-height: 1.75;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    overflow: hidden;
    height: auto;
    display: none;
}

header nav div ul.menu-open {
    display: block;
}

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
  });
});

因此，当用户单击按钮时，它会切换打开菜单的类。该菜单目前适用于单页网站，因此我也有一个流畅的滚动脚本。我如何让菜单在用户做出选择后消失，例如菜单在他们选择关于并将他们带到正确的部分后消失。

谢谢!

Answer 1

试试看:a fiddle

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});
$('.navbar li a').click(function(){
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});