Bootstrap RWD 下拉選單點擊後自動收合

發表於 2023-02-15 分類於 Bootstrap

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

預設狀況下，Bootstrap RWD 下拉選單點擊後不會自動收合，這邊介紹一個簡單的方法，讓下拉選單點擊後自動收合。

Bootstrap

前言

預設狀況下，Bootstrap RWD 下拉選單點擊後不會自動收合，這邊介紹一個簡單的方法，讓下拉選單點擊後自動收合。

Bootstrap

首先這邊有一個事情要先告知一下，由於 Bootstrap 4 之後作出了一個重大的改變，也就是移除了 jQuery 的依賴，但是考慮到可能還是有人使用 Bootstrap5 以下的版本，因此這一篇我會介紹兩種寫法。

那麼拉回正題，首先我們在 Bootstrap 元件中有一個元件叫做 Navbar（導覽列），當你縮小到一定尺寸時，就會出現漢堡選單，點擊後就會出現下拉選單

下拉選單

那麼在 How to hide collapsible Bootstrap navbar on click 底下其實有人分享一段程式碼

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
  l.addEventListener('click', () => { bsCollapse.toggle() })
})

基本上是沒有什麼太大問題，但是如果你的 Navbar 中有下拉選單需要展開的話，那麼就會變成點了下拉選單就被收合的問題，因此我自己稍微調整了一下程式碼變成以下

const dataToggle = document.querySelectorAll('[data-toggle]');
const menuToggle = document.getElementById('navbarSupportedContent');
const bsCollapse = new bootstrap.Collapse(menuToggle, {
  toggle: false
});

dataToggle.forEach((item) => {
  item.addEventListener('click', () => {
    bsCollapse.toggle()
  })
});

接著再針對你要點擊的元素加上 data-toggle 即可

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <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" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" data-toggle href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" data-toggle href="#">Action</a></li>
            <li><a class="dropdown-item" data-toggle href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-toggle href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" >Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

這樣子當你點擊 Home、Link 等等的時候，就會自動收合，而當你點擊 Dropdown 的時候，就會展開下拉選單而不會全部收合。

透過 data-* 小技巧，我們可以限定只有點擊特定元素才會觸發收合的動作，而不會影響到其他元素。

這邊也額外提供 Bootstrap 4 的寫法也是類似的，只是要注意的是 Bootstrap 4 的 data-toggle 是 data-toggle="collapse"，因此為了避免互相影響，你可以改成 data-auto="true" 之類的

1
2
3

$('[data-auto]').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

參考文獻

How to hide collapsible Bootstrap navbar on click