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

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

Patricia Arquette

リリース： 2024-12-15 22:43:26

オリジナル

397 人が閲覧しました

How Do I Make My Collapsible Navbar Automatically Close on Link Click in Bootstrap?

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

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

Bootstrap 3 のソリューション

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

<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>

ログイン後にコピー

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

Bootstrap 4 のソリューション

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

ブートストラップのソリューション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">

ログイン後にコピー

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