如何在點擊連結後自動關閉 Bootstrap 導覽列？-css教學-PHP中文網

如何在點擊連結後自動關閉 Bootstrap 導覽列？

Barbara Streisand

發布： 2024-12-13 18:23:10

原創

387 人瀏覽過

How to Automatically Close a Bootstrap Navbar After Clicking a Link?

如何關閉連結點擊時的 Bootstrap 導覽列

問題：

您的 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() 
        })
    }
})

登入後複製

資料屬性方法：新增data-bs-toggle="collapse" 和data-bs-target =".navbar-collapse.show" 屬性連結。

<nav>
    <ul>
        <li>
            <a href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
        </li>
        ...
    </ul>
</nav>

登入後複製

引導程式4

jQuery方法：在nav-collapse元素上使用collapse方法。

<ul class="navbar-nav mr-auto">
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

登入後複製

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

登入後複製

資料屬性方法：新增data-toggle="collapse"和data-target=".navbar-collapse.show" 屬性鏈接。

<ul>
    <li>
        <a href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
    </li>
    ...
</ul>

登入後複製

Bootstrap 3

資料屬性方法： 新增data-toggle="collapse"data- target=".navbar-collapse.show" 連結屬性。

<ul>
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

登入後複製

jQuery 方法： 在 navbar-collapse 元素上使用 Collapse 方法.

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

登入後複製

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