javascript - 选择项目时自动关闭导航

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>

标签： javascript