リンクをクリックした後に折りたたみ可能なブートストラップ ナビゲーションバーを自動的に閉じる方法

クリック時に折りたたみ可能な 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>

ブートストラップ 4:

使用中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>

ブートストラップ 3:

使用中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>

これらのメソッドのいずれかを実装すると、ユーザーがクリックするたびに折りたたみ可能なブートストラップ ナビゲーション バーが閉じます。リンク上で、シームレスでユーザー フレンドリーなナビゲーション エクスペリエンスを提供します。

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