如何在點擊時隱藏可摺疊的Bootstrap 4導航欄

Question

我已經使用Bootstrap 4創建了這個可摺疊的導航欄，該工具很好用，但我希望在用戶點擊鏈接時關閉它。任何方式來做到這一點？由於

HTML導航欄：

<nav class="navbar navbar-toggleable-md fixed-top"> 

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
</button> 

      <div class="container"> 

       <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> 

        <div class="collapse navbar-collapse" id="navbarDiv"> 

         <ul class="navbar-nav mr-auto"> 

          <li class="nav-item active"> 

           <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 

          </li> 

          <li class="nav-item"> 

           <a class="nav-link" href="#about-us">About</a> 

          </li> 

          <li class="nav-item"> 

           <a class="nav-link" href="#pricing">Pricing</a> 

          </li> 

         </ul> 

        </div> 

      </div> 

     </nav> 

CSS的.icon吧，因爲引導4不使用圖標條的類。

.navbar-toggler .icon-bar { 
    margin: 7px; 
    display: block; 
    width: 22px; 
    height: 1px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

Answer 1

您可以將collapse組件添加到鏈接這樣的..

<ul class="navbar-nav mr-auto"> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a> 
    </li> 
</ul> 

Demo using 'data-toggle' method

或者，（也許是一個更好的辦法）使用jQuery這樣的..

$('.navbar-nav>li>a').on('click', function(){ 
    $('.navbar-collapse').collapse('hide'); 
}); 

Demo using jQuery method

更新2018引導4.0.0

導航欄發生了變化，但click after close方法仍然是相同的：

https://www.codeply.com/go/nFDHoEqqJQ

Answer 2

您可以致電$.collapse('hide');與事件處理程序在鏈接上。

$('.nav-link').on('click',function() { 
 
    $('.navbar-collapse').collapse('hide'); 
 
});

.navbar-toggler .icon-bar { 
 
    margin: 7px; 
 
    display: block; 
 
    width: 22px; 
 
    height: 1px; 
 
    background-color: #cccccc; 
 
    border-radius: 1px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-toggleable-md fixed-top"> 
 
    <button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
</button> 
 
    <div class="container"> 
 
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> 
 
    <div class="collapse navbar-collapse" id="navbarDiv"> 
 
     <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#about-us">About</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#pricing">Pricing</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 3

有了嘗試上述解決方法，我失蹤了下拉切換的解決方案，所以在這裏你去！還打開子菜單項。

也許你必須稍微調整它，如果你的切換類不同。

$('.navbar-nav li a').on('click', function(){ 
    if(!$(this).hasClass('dropdown-toggle')){ 
     $('.navbar-collapse').collapse('hide'); 
    } 
}); 

Answer 4

我採用了棱角分明並且因爲它給了我的問題routerLink只是添加在李標籤中的數據，切換和目標....或使用jquery像「ZimSystem」

<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> 
 
      <a class="nav-link" routerLink="/inicio" routerLinkActive="active" >Inicio</a> 
 
     </li> 
 
     </ul> 
 
</div>