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)

然而，如果导航栏有下拉菜单，哪种工作方式，上面的例子似乎分崩离析...

所以我的问题是，当引导程序 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/

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

1 个答案: