リンクをクリックした後にブートストラップ ナビゲーション バーを自動的に閉じるにはどうすればよいですか?

リンクをクリックしてブートストラップ ナビゲーション バーを閉じる方法

問題:

モバイル デバイスでブートストラップ ナビゲーション バーが折りたたまれています。 、ただし、ユーザーがクリックしたときに閉じたいとします。リンク。

解決策:

Bootstrap 5 (ベータ版)

• JavaScript メソッド: ナビゲーションバーを切り替えるためにクリック イベント リスナーをメニュー項目に追加しますCollapse.

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 メソッド: navbar-collapse 要素で Collapse メソッドを使用します。

• Home
...

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

• データ属性メソッド: 追加data-toggle="collapse" および data-target=".navbar-collapse.show" 属性をリンクに設定します。

• Home
...

ブートストラップ 3

• データ属性メソッド: 追加data-toggle="collapse" および data-target=".navbar-collapse.show" 属性をリンクに追加します。

• Home
...

• jQuery メソッド: を使用します。 navbar-collapse要素のcollapseメソッド。

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

以上がリンクをクリックした後にブートストラップ ナビゲーション バーを自動的に閉じるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。