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

Zitat von Virinum

Liegt die Webseite irgendwo, sodass man sie sich mal komplett angucken kann?

Finde es mit den paar Zeilen JavaScript etwas schwierig da irgendwie zu helfen.

Sie ist leider noch nicht veröffentlicht. Deswegen würde ich sie ungern irgendwo posten.

Zitat von aRaphael

Da würde ich jetzt eher mal im ccs nachsehen, als im js

Falsch ausgedrückt. Normal funktioniert das Menü super. Mit diesem Schnipsel Code wird es aber standardmäßig ausgeklappt.

Über ein anderes Forum habe ich die Lösung nun bekommen.

<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>

Funktioniert wunderbar