Я создал эту складную панель навигации с помощью 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" 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;
}
<span class="navbar-toggler-icon"></span>
для полос значков в BS 4.navbar-inverse
в панели навигации, чтобы изменить все цвета текста на белый (или прозрачный белый)data-toggle
иdata-target
для родительского элемента (li
), иначе scrollspy не будет работать. Может тебе стоит отредактировать свой ответ. :)Я использую ANGULAR, и поскольку это дало мне проблемы, routerLink просто добавляет переключатель данных и цель в тег li .... или используйте jquery, например "ZimSystem"
источник
data-toggle="collapse" data-target=".navbar-collapse.show"
к li, включая раскрывающийся список li.Вы можете вызвать
$.collapse('hide');
обработчик событий по ссылкам.источник
Попробовав вышеуказанные решения, мне не хватало решения для переключателей Dropdown, так что вперед! Также открывает пункты подменю.
Возможно, вам придется немного его настроить, если у вас другой класс переключения.
источник
$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
это решение закрыть меню при нажатии на якорь, а затем применить эту строку в элементе списка
реальный пример, который работает для меня, ниже
источник
Я использую Angular 5 с Boostrap 4. У меня так работает.
источник
Самый простой способ сделать это, используя только шаблон Angular 2/4 без кодирования:
источник
Этот код имитирует щелчок по кнопке бюргера, чтобы закрыть панель навигации, щелкнув ссылку в меню, сохраняя эффект затухания. Решение с машинописным текстом для angular 7. Избегайте проблем с routerLink.
источник
Вы можете использовать простую привязку при нажатии и закрытии, например:
(click)="drawer.close()
источник