如何在点击时隐藏可折叠的 Bootstrap 导航栏
Posted
技术标签:
【中文标题】如何在点击时隐藏可折叠的 Bootstrap 导航栏【英文标题】：How to hide collapsible Bootstrap navbar on click 【发布时间】：2017-07-13 02:23:18 【问题描述】：我使用 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" ></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>
.icon-bar 的 css，因为 Bootstrap 4 不使用 icon-bar 类。
.navbar-toggler .icon-bar
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
【问题讨论】：
【参考方案1】：2021 年更新 - Bootstrap 5（测试版）
使用javascript在菜单项上添加点击事件监听器来关闭Collapse navbar..
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) =>
l.addEventListener('click', () => bsCollapse.toggle() )
)
BS5 demo javascript method
或者，在每个链接的标记中使用data-bs-toggle 和data-bs-target 数据属性来切换折叠导航栏...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
</li>
</ul>
<form class="d-flex my-2 my-lg-0">
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
BS5 demo data-attributes method
2019 年更新 - Bootstrap 4
导航栏变了，但是“点击后关闭”的方式还是一样的：
BS4 demo jQuery methodBS4 demo data-toggle method
Bootstrap 3（原始答案）
您可以将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>
BS3 demo using 'data-toggle' method
或者，（也许是更好的方法）像这样使用jQuery..
$('.navbar-nav>li>a').on('click', function()
$('.navbar-collapse').collapse('hide');
);
BS3 demo using jQuery method
【讨论】：
您好，感谢您的回复，但是当我这样做时，它不会折叠导航栏，而是折叠它与 scrollspy 链接的 div 元素。有什么建议？谢谢 太棒了..记住你可以使用<span class="navbar-toggler-icon"></span>作为BS 4中的图标栏。
@Zim - 您必须将 data-toggle 和 data-target 设置为父元素 (li)，否则 scrollspy 将不起作用。也许你应该编辑你的答案。 :)
在 a-href 中添加标签不起作用。浏览器触发关闭菜单，并且永远不会到达 href 链接。我认为最终的解决方案是使用 JavaScript
这是我修改后的 Bootstrap 5 版本，以避免在启动时打开菜单并在单击下拉标题时关闭菜单：` const navLinks = document.querySelectorAll('.nav-item:not(.落下）'）; const menuToggle = document.getElementById('navbarSupportedContent'); const bsCollapse = new bootstrap.Collapse(menuToggle, toggle: false); navLinks.forEach( function(l) l.addEventListener('click', function() // 避免在桌面上闪烁 if (menuToggle.classList.contains('show')) bsCollapse.toggle(); ) ; ); `【参考方案2】：
我正在使用 ANGULAR，因为它给我带来了问题，routerLink 只需在 li 标签中添加数据切换和目标....或使用 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>【讨论】：
谢谢，你为我节省了一天！我正在使用带有引导程序 4.1.3 的 Angular 6。将data-toggle="collapse" data-target=".navbar-collapse.show" 应用于 li，包括下拉列表 li。
这个答案是干净和精湛的！
对于使用 Bootstrap
您的解决方案完美运行，但您的小提琴示例看起来很糟糕
工作。为什么这个答案不在顶部？【参考方案3】：
您可以使用链接上的事件处理程序调用$.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" ></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>【讨论】：
【参考方案4】：通过尝试上述解决方案，我错过了下拉切换的解决方案，所以你去吧！还会打开子菜单项。
如果你的切换类不同，也许你需要稍微调整一下。
$('.navbar-nav li a').on('click', function()
if(!$( this ).hasClass('dropdown-toggle'))
$('.navbar-collapse').collapse('hide');
);
【讨论】：
这更短，可能更快：$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () $('.navbar-collapse').collapse('hide'); 【参考方案5】：
这是单击锚点时关闭菜单然后在列表项中应用此行的解决方案
data-target="#sidenav-collapse-main" data-toggle="collapse"
对我有用的真实例子如下
<li class="nav-item" data-target="#sidenav-collapse-main" data-
toggle="collapse" >
<a class="nav-link" routerLinkActive="active" routerLink="/admin/users">
<i class="ni ni-single-02 text-orange"></i> Users
</a>
</li>
【讨论】：
【参考方案6】：仅使用 Angular 2/4 模板而无需编码的最简单方法：
<nav class="navbar navbar-default" aria-expanded="false">
<div class="container-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="collapse: isCollapsed">
<ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="exact: true"><a routerLink="/">Home</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
</ul>
</div>
</div>
</nav>
【讨论】：
【参考方案7】：我正在使用 Angular 5 和 Boostrap 4。它以这种方式为我工作。
$(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e)
if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' )
$('.navbar-collapse').collapse('hide');
);
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/home']">FbShareTool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" [routerLink]="['/dashboard']">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" [routerLink]="['/fbgroup']">Facebook Group</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
<ul class="navbar-nav navbar-right navbar-right-link">
<li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" >
<a class="nav-link" (click)="logIn()">Login</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link"> _myAuthService.userDetails.displayName </a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated() && _myAuthService.userDetails.photoURL">
<a>
<img [src]="_myAuthService.userDetails.photoURL" class="img-fluid rounded" >
</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" (click)="logOut()">Logout</a>
</li>
</ul>
</div>
</nav>【讨论】：
【参考方案8】：此代码模拟单击 burguer 按钮以通过单击菜单中的链接来关闭导航栏，从而保持淡出效果。 Angular 7 的 typescript 解决方案。避免 routerLink 问题。
ToggleNavBar ()
let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
if ( element.getAttribute( 'aria-expanded' ) == 'true' )
element.click();
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>
【讨论】：
使用 jQuery 提出的解决方案在延迟加载的 Angular 7 中无法正常工作。【参考方案9】：在我的情况下，使用 Zim 的 bootstrap 5 js 解决方案后，菜单始终处于显示状态。
将toggle: false 添加到Collapse 对象构造函数后问题得到解决，如example of the specification 中所示。
Zen的修改代码：
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle,
toggle: false
)
navLinks.forEach((l) =>
l.addEventListener('click', () => bsCollapse.toggle() )
)
（我无法发表评论，所以我创建了一个单独的答案）
【讨论】：
【参考方案10】：自从我使用 React Bootstrap 以来，上述答案都没有帮助。在这种情况下，我必须创建一个状态来存储导航栏是折叠还是展开。
每当我切换/单击链接时，状态都会更新。
如果我单击切换菜单本身，就会发生切换。
每当我点击一个链接时，就会发生关闭。
这里有一个代码 sn-p 做同样的事情：
function Navigation()
const [expanded, setExpanded] = useState(false);
const navToggle = () =>
setExpanded(expanded ? false : true);
;
const closeNav = () =>
setExpanded(false);
;
return (
<React.Fragment>
<Navbar expand="lg" expanded=expanded>
<Container>
<Navbar.Brand as=Link to="/" onClick=closeNav>
Site Header
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" onClick=navToggle />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link to="/link1" onClick=closeNav>
Link 1
</Nav.Link>
<Nav.Link to="/link2" onClick=closeNav>
Link 2
</Nav.Link>
<Nav.Link to="/link3" onClick=closeNav>
Link 3
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
【讨论】：
【参考方案11】：我修改了 Zim 的答案。 现在代码仅在导航栏打开时才关闭它。
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle,
toggle: false
)
navLinks.forEach((l) =>
l.addEventListener('click', () =>
if(bsCollapse._isShown())
bsCollapse.hide()
)
)
【讨论】：
【参考方案12】：您可以在单击和关闭时使用简单的绑定，如下所示：(click)="drawer.close()
<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
【讨论】：
【参考方案13】：在您的标签中添加以下代码
data-toggle="collapse" data-target=".navbar-collapse.show"
如下图在每个标签中
<li class="nav-item">
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
【讨论】：
data-bs-toggle 和 data-bs-target【参考方案14】：引导程序 5
/* FOR MOBILE ONLY */
if (window.matchMedia("(max-width: 991px)").matches)
const navLinks = document.querySelectorAll('.nav-
item:not(.dropdown)');
const menuToggle = document.getElementById('navbarToggler');
const bsCollapse = new bootstrap.Collapse(menuToggle, toggle: false);
navLinks.forEach((l) =>
l.addEventListener('click', () => bsCollapse.toggle() )
);
设置断点（“navbar-expand-lg”为 991）
在您的 HTML 中：设置 ID、data-bs-target...
为我工作好
【讨论】：
以上是关于如何在点击时隐藏可折叠的 Bootstrap 导航栏的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript - Bootstrap 4 - 仅在折叠时隐藏导航栏
Bootstrap：单击菜单外部时如何关闭打开的折叠导航栏？