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

リンクをクリックすると折りたたみ可能なナビゲーションバーが自動的に閉じます

Bootstrap 4 を使用して、機能的な折りたたみ可能なナビゲーションバーを作成しました。ユーザーがリンクを選択すると自動的に閉じます。この記事では、この望ましい動作を実現するための、Bootstrap 3 と Bootstrap 4 の両方に対する包括的なソリューションを提供します。

Bootstrap 3 のソリューション

Bootstrap 3 では、内のリンクを変更できます。ナビゲーションバーに「data-toggle」属性を組み込む。この属性は、リンクがクリックされたときに折りたたみ動作をトリガーします。

• Home (current)
• About
• Pricing

このソリューションは、折りたたみクラスと表示クラスを利用して、ナビゲーションバーの表示を制御します。

Bootstrap 4 のソリューション

Bootstrap 4 の場合、「クリック時に閉じる」を実現するには主に 2 つの方法があります。機能。

オプション 1: jQuery メソッド

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

オプション 2: データ属性を持つ JavaScript メソッド

• Home (current)
• About
• Pricing

ブートストラップのソリューション5

Bootstrap 5 では、イベント リスナーを使用した JavaScript メソッドまたはデータ属性メソッドのいずれかを使用できます。

イベント リスナーを使用した 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() 
    })
  }
})

データ属性メソッド

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse"></div>
</div></nav>

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