自动关闭项目选择导航

Question

单击某项时如何关闭下面的菜单？

该菜单在桌面上是固定的侧边栏，在移动设备上是一个切换菜单。很好，但是打开时菜单占据屏幕的一半，并且单击导航项时，页面向下滚动到该部分，但是菜单保持打开状态，除非您关闭它，否则内容将被阻止，但我不想添加访客不必要的步骤

谢谢

这是js

//// NAVBAR COLLAPSE
var rNav = $(".right-nav"),
  hInfo = $(".home .info"),
  home = $(".home"),
  navBtn = $(".slide-nav-btn"),
  navBtnActive = "slide-nav-btn-active",
  nav = $(".slide-nav"),
  navActive = "slide-nav-active",
  rNavSpan = $(".right-nav ul li i"),
  up = $(".up i"),
  body = $("html, body");
rNav.css("top", (home.height() - rNav.height()) / 2);
hInfo.css("top", (home.height() - hInfo.height()) / 2);
navBtn.on("click", function() {
  $(this).toggleClass(navBtnActive);
  nav.toggleClass(navActive)

});

这是HTML

<div class="menu navbar-sp">
                <nav>
                    <ul id="navbar">
                        <li class="active">
                            <a href="#home" data-scroll-nav="0" class="active">
                                <i class="fa fa-home"></i> Home
                            </a>
                        </li>
                        <li>
                            <a href="#about" data-scroll-nav="1">
                                <i class="fa fa-user-o"></i> About
                            </a>
                        </li>
                        <li>
                            <a href="#services" data-scroll-nav="2">
                                <i class="fa fa-tasks"></i> Services
                            </a>
                        </li>
                        <li>
                            <a href="#resume" data-scroll-nav="3">
                                <i class="fa fa-gears"></i> Resume
                            </a>
                        </li>
                        <li>
                            <a href="#portfolio" data-scroll-nav="4">
                                <i class="fa fa-suitcase"></i> Portfolio
                            </a>
                        </li>
                        <li>
                            <a href="#blog" data-scroll-nav="5">
                                <i class="fa fa-comments-o"></i> Blog
                            </a>
                        </li>
                        <li>
                            <a href="#contact" data-scroll-nav="6">
                                <i class="fa fa-envelope-o"></i> Contact
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>