单击时如何隐藏可折叠的Bootstrap 4导航栏

本文介绍了单击时如何隐藏可折叠的Bootstrap 4导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 我已经使用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 $ $（'。navbar-collapse'）。collapse（'hide'）; }）; 使用jQuery方法演示 更新2018 Bootstrap 4.0.0 导航栏已更改，但关闭方法后的点击仍然是相同的： 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? Thankshtml 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' methodOr, (perhaps a better way) use jQuery like this..$('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide');});Demo using jQuery methodUpdate 2018 Bootstrap 4.0.0The navbar has changed, but the click after close method is still the same:https://www.codeply.com/go/nFDHoEqqJQ 这篇关于单击时如何隐藏可折叠的Bootstrap 4导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..