是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2023-02-15 Bootstrap

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

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

Bootstrap

前言

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

Bootstrap

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

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

下拉選單

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

1
2
3
4
5
6
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 中有下拉選單需要展開的話，那麼就會變成點了下拉選單就被收合的問題，因此我自己稍微調整了一下程式碼變成以下

1
2
3
4
5
6
7
8
9
10
11
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 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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');
});

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

什麼！Bootstrap 4 變成 Bootstrap 5 了

2021-02-05

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme