如何讓我的可折疊導覽列在 Bootstrap 中的連結點擊時自動關閉？

可折疊導覽列在連結點擊時自動關閉

您已經使用 Bootstrap 4 建立了一個功能性可折疊導覽列。但是，您想要它當用戶選擇連結時自動關閉。本文為 Bootstrap 3 和 Bootstrap 4 提供了全面的解決方案，以實現此所需的行為。

Bootstrap 3 的解決方案

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

此解決方案利用折疊和顯示類別來控制導覽列的可見性。

Bootstrap 4 的解決方案

對於Bootstrap 4，主要有兩種方法來完成「點擊關閉」

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

Bootstrap解決方案5

Bootstrap解決方案5

Bootstrap解決方案5

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() 
    })
  }
})

Bootstrap解5

對於Bootstrap 5，您可以使用帶有事件監聽器的JavaScript方法或資料屬性方法。

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

有事件監聽器的 JavaScript 方法 資料屬性方法資料屬性方法

以上是如何讓我的可折疊導覽列在 Bootstrap 中的連結點擊時自動關閉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！