单击时关闭可折叠 Bootstrap 导航栏
Bootstrap 5(测试版)
Bootstrap 4
引导程序3
这是 Bootstrap 的详细解决方案3:
标记:
<ul class="navbar-nav mr-auto"> <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#about-us">About</a> </li> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#pricing">Pricing</a> </li> </ul>
jQuery:
$('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide'); });
此方法将在之后隐藏可折叠导航栏单击链接,增强用户体验和导航流程。
以上是如何在链接单击时关闭可折叠引导导航栏?的详细内容。更多信息请关注PHP中文网其他相关文章!