4
Bootstrap Mobile Menü einklappen mit klick auf Link
Guten Abend zusammen.
Ich bin ziemlich am verzweifeln.
Ich habe eine Homepage mit Bootstrap gebaut und möchte, dass das Mobile Menü einklappt, nachdem man einen Link angeklickt hat. Ich bekomme es aber ums verrecken nicht hin.
Entweder funktioniert danach mein smoothes scrollen nicht oder es klappt nicht ein.
Hier habe ich eine Lösung, mit der es super funktioniert. Allerdings ist hiermit das Menü standardmäßig ausgeklappt. Ich kenne mich mit JavaScript leider nur schlecht aus. Vielleicht hat jemand von euch einen Tipp für mich?
Wie gesagt: Es funktioniert prima. Nur ist das Menü jetzt standardmäßig ausgeklappt.
Vielen Dank.
Grüße,
Alex
Ich bin ziemlich am verzweifeln.
Ich habe eine Homepage mit Bootstrap gebaut und möchte, dass das Mobile Menü einklappt, nachdem man einen Link angeklickt hat. Ich bekomme es aber ums verrecken nicht hin.
Entweder funktioniert danach mein smoothes scrollen nicht oder es klappt nicht ein.
Hier habe ich eine Lösung, mit der es super funktioniert. Allerdings ist hiermit das Menü standardmäßig ausgeklappt. Ich kenne mich mit JavaScript leider nur schlecht aus. Vielleicht hat jemand von euch einen Tipp für mich?
<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarCollapse')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
</script>Wie gesagt: Es funktioniert prima. Nur ist das Menü jetzt standardmäßig ausgeklappt.
Vielen Dank.
Grüße,
Alex
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 665186
Url: https://administrator.de/contentid/665186
Printed on: April 19, 2024 at 00:04 o'clock
4 Comments
Latest comment
Ich habe eine Homepage mit Bootstrap gebaut
Version nennen wäre zumindest mal angebracht ... Beispiel<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-light bg-light sticky-top" style="border-bottom:1px solid gray;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-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>
</nav>
<h1>Hello, world!</h1>
<p>
liDonec commodo eget felis sed vehicula. Suspendisse pretium ultrices quam in iaculis. Aliquam a vulputate nisl. Etiam quam nunc, dictum ac nulla vel, posuere hendrerit metus. Quisque ante lacus, adipiscing id elit vel, ornare consectetur nisi. Etiam pretium, sapien vitae lobortis tempor, nibh justo cursus orci, non dapibus magna sapien quis enim. Phasellus rutrum elit justo, id pellentesque magna tempus dapibus. Etiam sed augue eros. Cras nec varius eros. Aenean sodales tincidunt dolor. Nunc ac metus tristique, porttitor justo eu, luctus diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut egestas libero quis velit volutpat, at scelerisque mauris porttitor.
</p>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggler').click();
});
</script>
</body>
</html>
Du hast vollkommen recht! Entschuldige.
Bootstrap 5.0.0 beta 2
So wie ich das sehe, gehts aber nur mit jQuery? Ist das richtig? Gibt es da keine andere Möglichkeit?
Bootstrap 5.0.0 beta 2
So wie ich das sehe, gehts aber nur mit jQuery? Ist das richtig? Gibt es da keine andere Möglichkeit?
Nö, klar geht das auch ohne jQuery,, war jetzt nur weniger zu tippen ... einfach via querySelector die oben genannten Klassen das Event dran binden, feddisch ...
<script type="text/javascript">
document.querySelectorAll('.navbar-collapse ul li a:not(.dropdown-toggle)').forEach((itm) =>{
itm.addEventListener('click',() => {document.querySelector('.navbar-toggler').click();});
});
</script>
Du bist so ein geiler Typ!!! Danke dir! Ich hab jetzt Tage daran gesessen. Ich hätte gleich nachfragen sollen.
Danke!!!
Danke!!!
