リンクをクリックしたときに折りたたみ可能なブートストラップナビゲーションバーを閉じるにはどうすればよいですか?

クリック時に折りたたみ可能なブートストラップ ナビゲーションバーを閉じる

Bootstrap 5 (ベータ版)

• JavaScript を利用してメニュー項目にイベント リスナーを追加する

ブートストラップ 4

• データ切り替えを使用してリンクに折りたたみコンポーネントを追加するか、制御に jQuery を利用します。
>

ブートストラップ3

• データトグルを使用してリンクに折りたたみコンポーネントを含めるか、jQuery を使用してリンクのクリック時にナビゲーションバーを非表示にします。

ブートストラップの詳細なソリューションは次のとおりです。 3:

マークアップ:

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
</ul>

jQuery:

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

このメソッドは、後で折りたたみ可能なナビゲーションバーを非表示にします。リンクがクリックされると、ユーザー エクスペリエンスとナビゲーション フローが向上します。

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