如何在連結點擊後自動關閉可折疊引導導覽列？

如何在點擊時隱藏可折疊Bootstrap 4 導航欄

問題：

您已經創建了一個可折疊的Bootstrap導覽欄，可以順利打開，但它仍然保持打開狀態即使導航到不同的部分後也是如此。您希望它在用戶單擊連結時自動關閉。

解：

Bootstrap 5（測試版）：

使用JavaScript:

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
    if (menuToggle.classList.contains('show')) {  // only fire on mobile
        l.addEventListener('click', () => { 
            bsCollapse.toggle() 
        })
    }
})

使用資料屬性：

<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>

Bootstrap> >

使用jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

使用資料屬性：

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

Bootstrap 3:

Bootstrap 3:

使用jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

使用資料屬性：

透過實作這些方法中的任何一個，您的可折疊Bootstrap 導航欄將在用戶點擊時關閉在連結上，提供無縫且用戶友好的導航體驗。

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

以上是如何在連結點擊後自動關閉可折疊引導導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！