单击 link 时自动关闭导航栏（响应模式）

Question

$('.navbar-collapse a').click(function() {
  $(".navbar-collapse").collapse('hide');
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar navbar-default fixed-top navbar-expand-md navbar-light shadow-sm">
  <div class="container">

    <!--
<nav class="navbar navbar-default navbar-fixed-top rhgh-fixed-top">
  <div class="container">
    //-->

    <a class="navbar-brand" href="#home">
      <i class="fa fa-home"></i>&nbsp;Resthaven Guesthouse
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <li class="dropdown nav-item">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-box-open"></i>&nbsp;Accommodation
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#budget-room"><i class="fa fa-shopping-cart"></i>&nbsp;Basic Room</a>
            <a class="dropdown-item" href="#standard-room"><i class="fa fa-coins"></i>&nbsp;Standard Room</a>
            <a class="dropdown-item" href="#luxury-room"><i class="fa fa-car"></i>&nbsp;Luxury Room</a>
            <a class="dropdown-item" href="#vip-room"><i class="fa fa-gem"></i>&nbsp;VIP Room</a>
            <a class="dropdown-item" href="#self-catering"><i class="fa fa-list-alt"></i>&nbsp;Self-Catering Units</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#conference"><i class="fa fa-video"></i>&nbsp;Conference</a>
        </li>

        <li class="dropdown nav-item">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-spin fa-futbol"></i>&nbsp;Activities
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#lesotho"><i class="fa fa-globe-africa"></i>&nbsp;Lesotho</a>
            <a class="dropdown-item" href="#fly-fishing"><i class="fa fa-anchor"></i>&nbsp;Fly&nbsp;Fishing</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#about"><i class="fa fa-info-circle"></i>&nbsp;About&nbsp;Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#gallery"><i class="fa fa-camera"></i>&nbsp;Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact"><i class="fa fa-phone"></i>&nbsp;Contact&nbsp;Us</a>
        </li>
      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="navbar-nav mr-auto">
        <!-- Social networking Links -->
        <li class="nav-item"><a class="nav-link" href="#awards"><i class="fas fa-award"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://www.facebook.com/resthavenmatatza/" target="_blank"><i class="fab fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://www.google.com/maps/place/Resthaven+Guesthouse/@-30.344456,28.8098163,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x43d5e39a91a6224!8m2!3d-30.344456!4d28.812005?hl=en-GB" target="_blank"><i class="fab fa-google"></i></a></li>
        <li class="nav-item"><a class="nav-link" href="https://twitter.com/ResthavenGH" target="_blank"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>
  </div>

</nav>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

所以我试图在用户单击 link 时自动关闭移动设备上的 bootstrap 导航栏，并遇到以下 link:

Auto close Navbar when click on link (responsive mode)

但是如果导航栏有下拉菜单，那么上面的示例似乎会崩溃...

所以我的问题是，当 bootstrap 4.3.x 导航栏中有下拉菜单时，我该如何实现？

Ps。我也尝试了下面提到的 links 无济于事：

How to get responsive navbar menu to automatically close after anchor link clicked?

Answer 1

更新：

您可以将“.single”class 添加到每个没有任何下拉项的元素，然后只要有人单击“.single”class，您就会隐藏菜单。每当有人点击“.dorpdown-item”时，您就会再次隐藏菜单。

使用以下代码：

   $( document ).ready(function() {
   
    $('.dropdown-item').click(function(){
     $('.navbar div').removeClass('show');
  });  
  $('.single').click(function(){
         $('.navbar div').removeClass('show');
  });
 
   });

看到这个工作 fiddle https://jsfiddle.net/mayureshpitale/4udmxpth/18/

单击 link 时自动关闭导航栏（响应模式）

Auto close Navbar when click on link (responsive mode)

navbar

bootstrap-4