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

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>

所以我尝试在用户单击链接时自动关闭移动设备上的引导导航栏，并遇到以下链接：

Auto close Navbar when click on link (responsive mode)

如果导航栏有一个下拉菜单，哪种方法有效，上面的例子似乎崩溃了......

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

附言。我也试过下面提到的链接无济于事：

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

How to hide collapsible Bootstrap 4 navbar on click

Answer 1

更新：

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

使用以下代码：

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

看看这个工作小提琴 https://jsfiddle.net/mayureshpitale/4udmxpth/18/