Как скрыть складную навигационную панель Bootstrap 4 на клике
Я создал эту складную панель навигации с помощью Bootstrap 4, которая прекрасно работает, но я бы хотел, чтобы она закрывалась, когда пользователь нажимает на ссылку. Есть ли способ сделать это? Спасибо
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 для.icon-bar, так как Bootstrap 4 не использует класс icon-bar.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}
18 ответов
Вы можете добавить 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>
Демо с использованием метода data-toggle
Или(возможно, лучший способ) использовать jQuery, как это..
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
Демо с использованием метода jQuery
Обновление 2018 Bootstrap 4.0.0
Навбар изменился, но click after close метод все тот же:
Я использую 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>Ты можешь позвонить $.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>С опробованными выше решениями мне не хватало решения для переключателей Dropdown, так что вот и все! Также открывает подменю пунктов.
Возможно, вам придется немного его настроить, если ваш класс переключения отличается.
$('.navbar-nav li a').on('click', function(){
if(!$( this ).hasClass('dropdown-toggle')){
$('.navbar-collapse').collapse('hide');
}
});
Это решение закрыть меню при нажатии на якорь, а затем применить эту строку в элементе списка
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>
Bootstrap 5.3 – обновление 2023 г.
Следующее работает с Bootstrap 5.2 и более поздних версий:
<div class="collapse navbar-collapse" id="main-menu-navbar">
<ul class="navbar-nav me-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link d-lg-none" href="/">
<span data-bs-toggle="collapse" data-bs-target="#main-menu-navbar">Home</span>
</a>
<a class="nav-link d-none d-lg-block" href="/">Home</a>
</li>
</ul>
</div>
2 ссылки в навигационном элементе
Я использовал 2 ссылки, потому что если вы используетеdata-bs-toggle="collapse" data-bs-target="#main-menu-navbar"ваше меню будет «мигать/перезагружаться» и на рабочем столе, поэтому первая ссылка будет скрываться на экранах LG и более широких экранах, а вторая ссылка будет делать противоположное, скрываться на экранах меньше LG
Самый простой способ сделать это, используя только шаблон 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. Избегайте проблем с 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>
Я работаю с Bootstrap 5.1.3 в React и Redux-Toolkit. Добавив простой тег span, подобный этому, к моему компоненту Link (Route), например:<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>
В моем случае меню всегда было в показанном состоянии после использования решения Zim для начальной загрузки 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() })
})
(Я не мог комментировать, поэтому создал отдельный ответ)
Я использую 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" 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>Другие ответы не сработали для меня. Я использую машинописный текст с Bootstrap 5 и React.
Что я делаю, так это сначала получаю кнопку гамбургера, а затем вызываю «щелчок» по ней:
var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>;
btn[0].click();
Полный пример:
<Navbar expand="lg" className="nav iq-navbar">
<Container fluid className="navbar-inner">
<Navbar.Toggle aria-controls="navbarSupportedContent">
<span className="navbar-toggler-icon">
<span className="navbar-toggler-bar bar1 mt-2"></span>
<span className="navbar-toggler-bar bar2"></span>
<span className="navbar-toggler-bar bar3"></span>
</span>
</Navbar.Toggle>
<Navbar.Brand as="div" className="mb-2 ms-auto navbar-list mb-lg-0">
<img src={logo} alt="logo" className="img-fluid p-0 flex-column" />
</Navbar.Brand>
<Navbar.Collapse className="col-md-2 ms-auto align-items-start" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto">
<li className="item-name">
<Link className={`${location.pathname === '/dashboard' ? 'active' : ''} nav-link d-sm-none h1`} aria-current="page" to="/dashboard" onClick={() => { var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>; btn[0].click(); }}>D </Link>
<Link className={`${location.pathname === '/dashboard' ? 'active' : ''} nav-link d-none d-sm-block`} aria-current="page" to="/dashboard" onClick={() => { var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>; btn[0].click(); }}>Dashboard</Link>
</li>
</ul>
</Navbar.Collapse>
</Container>
</Navbar>
Я искал решение с помощью 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());
Ни один из приведенных выше ответов не помог, поскольку я использую 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>
);
}
BOOTSTRAP 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() })
});
}
Установите точку останова (991 для "navbar-expand-lg")
В вашем HTML: установите идентификатор, data-bs-target...
Работай хорошо для меня
Вы можете использовать простую привязку при нажатии и закрытии, например: (click)="drawer.close()
<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
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>
Я изменил ответ Зима. Теперь код закрывает панель навигации только в том случае, если она открыта.
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()
}
})
})