javascript - 使菜单在单击时消失

Question

所以我有一个引导菜单，它是我的一页网站之一，它非常好，但它有一个问题。

当在移动视点上单击汉堡包时，它会启动侧面板，当用户单击链接（在我的情况下是锚链接到页面上的某个部分）时，它会将您带到锚点，但侧面板仍保留在位置。我想要它，以便在单击链接时侧面板从视图中消失。

我试图寻找解决方案但没有成功，我认为它不起作用，因为解决方案取决于菜单的制作方式，所以如果有人可以在这里帮助我，我将不胜感激。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="site-mobile-menu site-navbar-target">
  <div class="site-mobile-menu-header">
    <div class="site-mobile-menu-close mt-3">
      <span class="icon-close2 js-menu-toggle"></span>
    </div>
  </div>
  <div class="site-mobile-menu-body"></div>
</div>


<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
  <div class="container">
    <div class="row align-items-center">

      <div class="col-6 col-xl-2">
        <h1 class="mb-0 site-logo"><a href="index.html">Brand<span class="text-primary">. 
                     </span> </a></h1>
      </div>

      <div class="col-12 col-md-10 d-none d-xl-block">
        <nav class="site-navigation position-relative text-right" role="navigation">

          <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
            <li><a href="#home-section" class="nav-link">Home</a></li>
            <li class="has-children">
              <a href="#about-section" class="nav-link">About Us</a>
              <ul class="dropdown">
                <li><a href="#team-section" class="nav-link">Team</a></li>
                <li><a href="#pricing-section" class="nav-link">Pricing</a></li>
                <li><a href="#faq-section" class="nav-link">FAQ</a></li>
                <li><a href="#gallery-section" class="nav-link">Gallery</a></li>
                <li><a href="#services-section" class="nav-link">Services</a></li>
                <li><a href="#testimonials-section" class="nav-link">Testimonials</a></li>
                <li class="has-children">
                  <a href="#">More Links</a>
                  <ul class="dropdown">
                    <li><a href="#">Menu One</a></li>
                    <li><a href="#">Menu Two</a></li>
                    <li><a href="#">Menu Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#blog-section" class="nav-link">Blog</a></li>
            <li><a href="#contact-section" class="nav-link">Contact</a></li>
            <li class="social"><a href="#contact-section" class="nav-link"><span 
                            class="icon- 
                         facebook"></span></a></li>
            <li class="social"><a href="#contact-section" class="nav-link"><span 
                      class="icon- 
                          twitter"></span></a></li>
            <li class="social"><a href="#contact-section" class="nav-link"><span 

                     class="icon-linkedin"></span></a></li>
          </ul>
        </nav>
      </div>

      <div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top: 
                `3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span 
                  class="icon-menu h3"></span></a></div>`

    </div>
  </div>
</header>

<div class="hero"></div>

标签： javascripthtmlcssmenu