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?

<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

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 665186

Url: https://administrator.de/contentid/665186

Ausgedruckt am: 24.11.2024 um 18:11 Uhr

4 Kommentare

Neuester Kommentar

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?

Zitat von @Knutella:
So wie ich das sehe, gehts aber nur mit jQuery?

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>