首頁 > web前端 > css教學 > 如何讓我的可折疊導覽列在 Bootstrap 中的連結點擊時自動關閉?

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

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 中,您可以修改以下連結導覽列合併「資料切換」屬性。單擊連結時,此屬性會觸發折疊行為。

<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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板