单击时如何隐藏可折叠的Bootstrap 4导航栏 [英] How to hide collapsible Bootstrap 4 navbar on click

问题描述

我已经使用Bootstrap 4创建了这个可折叠的导航栏，它很好地工作，但我希望在用户点击链接时关闭它。任何方式来做到这一点？谢谢

html navbar：

 < nav class =navbar navbar-toggleable-md fixed-top> 
 
 < span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
 
< div class =container> 
 
< a class =navbar-brandhref =＃>< img src =Images / logo.pngwidth =60px>< / a> 
 
< div class =collapse navbar-collapseid =navbarDiv> 
 
< ul class =navbar-nav mr-auto> 
 
< li class =nav-item active> 
 
  
< / li> 
 
< li class =nav-item> 
 
< a class =nav-linkhref =＃about-us>关于< / a> 
 
< / li> 
 
< li class =nav-item> 
 
< a class =nav-linkhref =＃pricing>定价< / a> 
 
< / li> 
 
< / ul> 
 
< / div> 
 
< / div> 
 
< / nav> 
  

css for .icon-bar，因为Bootstrap 4不使用图标栏类。 / p>

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

解决方案

您可以添加 collapse 组件到像这样的链接。

 < ul class = navbar-nav mr-auto> 
< li class =nav-item active> 
 < / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃about-usdata-toggle =collapsedata-target =。navbar-collapse.show>关于< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =＃pricingdata-toggle =collapsedata-target =。navbar-collapse.show>定价< / a> 
< / li> 
< / ul> 
  

使用'数据切换'方法的演示程序

或 （'。navbar-nav> li> a'）。on（'更好的方式）使用像这样的jQuery ..

$ p $ <点击'，function（）{
$（'。navbar-collapse'）。collapse（'hide'）;
}）;

使用jQuery方法演示

更新2018 Bootstrap 4.0.0

导航栏已更改，但关闭方法后的点击仍然是相同的：

< a href =https://www.codeply.com/go/nFDHoEqqJQ =noreferrer> https://www.codeply.com/go/nFDHoEqqJQ

I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this? Thanks

html navbar:

<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 for .icon-bar, since Bootstrap 4 doesn't use the icon-bar class.

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

解决方案

You can add the collapse component to the links like this..

<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

Or, (perhaps a better way) use jQuery like this..

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

Demo using jQuery method

Update 2018 Bootstrap 4.0.0

The navbar has changed, but the click after close method is still the same:

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

这篇关于单击时如何隐藏可折叠的Bootstrap 4导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！