如何隐藏可折叠引导导航栏点击

小开

最佳答案

更新2021-Bootstrap 5(beta)

使用 javascript 在菜单项上添加一个单击事件监听器，以关闭坍塌导航栏。

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演示 javascript 方法

或者， 使用每个链接上标记中的 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演示数据属性方法

更新2019-引导程序4

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

BS4演示 jQuery 方法
 BS4演示 data-toggle方法

引导程序3(原始答案)

您可以像下面这样将 collapse组件添加到链接中。

<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>

使用“数据切换”方法的 BS3演示

或者，(也许是一种更好的方法)这样使用 jQuery。

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

使用 jQuery 方法的 BS3演示

小开

可以使用链接上的事件处理程序调用 $.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>

小开

通过尝试以上解决方案，我错过了一个下拉按钮的解决方案，所以这里你去！也打开子菜单项。

如果你的切换类不同，也许你需要稍微调整一下。

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

小开

我使用的是 ANGULAR，因为它给我带来了问题，所以 routerLink 只需要在 li 标签中添加 data-toggle 和 target..。或者像“ ZimSystem”一样使用 jquery

<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>

小开

我使用的角度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" alt="profile-photo" class="img-fluid rounded" width="40px;">
</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" (click)="logOut()">Logout</a>
</li>
</ul>


</div>
</nav>

小开

最简单的方法做到这一点只使用角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>

小开

这段代码通过单击菜单中的链接来模拟单击 Burguer 按钮以关闭导航栏，从而保持淡出效果。角度7的打字稿解法。避免路由器连接问题。

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>

小开

这是解决方案，关闭菜单时点击锚，然后应用这一行在列表项目

     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>

小开

您可以使用一个简单的绑定点击和关闭，像这样: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">

小开

在 < a > TAG 中添加以下代码

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>

小开

由于我使用 React Bootstrap，以上的答案都没有帮助。在这种情况下，我必须创建一个状态来存储导航栏是折叠还是展开。

每当我 切换/点击链接时，状态就会更新。

如果我单击切换菜单本身，就会出现切换。

每当我单击一个链接时，就会出现了结。

下面是一个代码片段，它具有同样的功能:

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>
);
}

小开

在我的例子中，在使用了 Zim 的 bootstrap 5 js 解决方案之后，菜单总是处于显示状态。在将 toggle: false添加到 Collapse对象构造函数之后，问题得到了解决，如同在一个规范的例子中所示。

经修订的禅代码:

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() })
})

(我不能发表评论，所以我创建了一个单独的答案)

小开

我修改了辛姆的答案。现在，代码只在导航栏打开时才关闭它。

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()
}
})
})

小开

我正在使用 React 和 Redux-Toolkit 中的 Bootstrap 5.1.3。通过在我的 Link (Route)组件中添加一个简单的 span 标记，比如 <span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span>，可以让引导程序崩溃和链接路由无缝地工作。

* 如果你看到闪烁效果，你可以通过加入自举屏幕大小的显示标签来修正，例如:

<Link to={'/home'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span></Link>
<Link to={'/home'} className="nav-link d-none d-sm-block">Home</Link>

* 不需要额外的 JS 或 Jquery

* 它应该可以与大多数使用 Bootstrap 5.0的应用程序一起工作

<nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-expand-sm fixed-top">
<div className="container">


<button className="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
                    

<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav mt-2 mt-sm-0">
<li className="nav-item">
// 2 tags below for different screen sizes
<Link to={'/home'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span></Link>
<Link to={'/home'} className="nav-link d-none d-sm-block">Home</Link>
</li>
<li className="nav-item">
// 2 tags below for different screen sizes
<Link to={'/counter'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Counter</span></Link>
<Link to={'/counter'} className="nav-link d-none d-sm-block">Counter</Link>
</li>
</ul>
</div>


</div>
</nav>

小开

我正在寻找一个解决方案与 Bootstrap 5隐藏一个弹出式菜单时，一个新的部分视图显示，我这样做，但如果我是正确的多诺。

    // clear menu dropdowns
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('megaMenuDropdown')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach(() => bsCollapse.hide());