リンクをクリックした後に折りたたみ可能なブートストラップナビゲーションバーを自動的に閉じる方法-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-17 00:54:25

オリジナル

145 人が閲覧しました

How to Automatically Close a Collapsible Bootstrap Navbar After Link Click?

クリック時に折りたたみ可能な 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 サイトの他の関連記事を参照してください。

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

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