Stworzyłem ten zwijany pasek nawigacyjny za pomocą Bootstrap 4, który działa ładnie, ale chciałbym, aby zamykał się, gdy użytkownik kliknie łącze. Jakiś sposób to zrobić? Dzięki
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 dla .icon-bar, ponieważ Bootstrap 4 nie używa klasy icon-bar.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}
html
css
twitter-bootstrap
bootstrap-4
twitter-bootstrap-4
Rudi Thiel
źródło
źródło
<span class="navbar-toggler-icon"></span>
pasków ikon w BS 4.navbar-inverse
na pasku nawigacyjnym, aby zmienić wszystkie kolory tekstu na biały (lub przezroczysty biały)data-toggle
idata-target
na element nadrzędny (li
), w przeciwnym razie scrollspy nie będzie działać. Może powinieneś zmienić swoją odpowiedź. :)Używam ANGULAR i ponieważ spowodowało to problemy, routerLink po prostu dodaj przełącznik danych i cel w znaczniku li .... lub użyj jquery, takiego jak „ZimSystem”
źródło
data-toggle="collapse" data-target=".navbar-collapse.show"
do li, w tym rozwijanego li.Możesz wywołać
$.collapse('hide');
za pomocą programu obsługi zdarzeń na linkach.źródło
Podczas wypróbowywania powyższych rozwiązań brakowało mi rozwiązania dla przełączników rozwijania, więc proszę bardzo! Otwiera także elementy podmenu.
Może będziesz musiał to trochę poprawić, jeśli twoja klasa przełączania jest inna.
źródło
$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
jest to rozwiązanie pozwalające zamknąć menu po kliknięciu kotwicy, a następnie zastosować tę linię w pozycji listy
prawdziwy przykład, który działa dla mnie, znajduje się poniżej
źródło
Używam Angular 5 z Boostrap 4. W ten sposób działa u mnie.
źródło
Najłatwiej to zrobić używając tylko szablonu Angular 2/4 bez kodowania:
źródło
Ten kod symuluje kliknięcie przycisku burguera w celu zamknięcia paska nawigacyjnego poprzez kliknięcie łącza w menu, zachowując efekt zanikania. Rozwiązanie z użyciem maszynopisu dla kątowej 7. Unikaj problemów z routerem.
źródło
Możesz użyć prostego połączenia po kliknięciu i zamknięciu, na przykład:
(click)="drawer.close()
źródło