跳至主要内容

[BS4] Bootstrap 4 JavaScript

過時內容

本文內容基於 Bootstrap 4，該版本已於 2023 年停止維護（EOL），且依賴 jQuery。目前的穩定版本為 Bootstrap 5，已移除 jQuery 相依性，JavaScript API 也有部分破壞性變更（例如 data-toggle 改為 data-bs-toggle、data-spy 改為 data-bs-spy）。新專案請改用 Bootstrap 5。

關鍵字：collapse

Collapse​

在會被縮放的 collapsible 元素上，加上 data-collapsible 這個屬性（即，帶有 class="collapse" 的元素），則會自動為「觸發它的元素（一般是 <a>）」加上 .active：

$('[data-collapsible]').on('shown.bs.collapse', function (e) {
  $(`[href="#${e.currentTarget.id}"]`).addClass('active');
});

$('[data-collapsible]').on('hidden.bs.collapse', function (e) {
  $(`[href="#${e.currentTarget.id}"]`).removeClass('active');
});

❗ 要被 collapsible 的元素如果是清單（<ul>）的話，要用 <div class="collapse"> 把該清單包起來，不可直接在 <ul class="collapse"> 上套用 .collapse。

Tooltip​

啟用所有具有 data-toggle="tooltip" 元素的 tooltip 功能

$('[data-toggle="tooltip"]').tooltip();
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  let anchor = e.target.getAttribute('href');
  let previousAnchor = e.relatedTarget.getAttribute('href');

  if (!anchor || !previousAnchor) {
    return;
  }

  $(`[href="${previousAnchor}"]`).removeClass('active show');
  $(`[href="${anchor}"]`).addClass('active show');
}); // /Bootstrap

ScrollSpy​

範例程式碼 @ PJCHENder Codepen

Usage​

直接放在 body 上：不需使用 JS​

直接把 data-spy="scroll" 寫在 <body> 上的話，不需要在額外使用 JavaScript 去啟動：

<body data-spy="scroll" data-target="#verticalScrollspy">
  <nav class="col-3 col-sm-2" id="verticalScrollspy">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item"><a class="nav-link active" href="#dogs">Dogs</a></li>
    </ul>
  </nav>

  <div class="col-9 col-sm-10">
    <!-- 內容放這 -->
  </div>
</body>

放在想要的容器上：需使用 JS​

<body> 上不添加 data-spy="scroll"，添加在想要被監控的元素上，此時需要額外透過 JavaScript 啟動：

<body>
  <nav class="col-3 col-sm-2" id="verticalScrollspy">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item"><a class="nav-link active" href="#dogs">Dogs</a></li>
    </ul>
  </nav>

  <div class="col-9 col-sm-10">
    <div data-spy="scroll" data-target="#verticalScrollspy">
      <!-- 內容放這 -->
    </div>
  </div>
</body>

透過 JavaScript 來啟動：

$(document).ready(function () {
  $('body').scrollspy({ target: '#verticalScrollspy' });
});

Events​

// 顯示目前 activate 的是哪個 element
$(window).on('activate.bs.scrollspy', function (e, obj) {
  console.log(obj.relatedTarget);
});

如果想要在捲動捲軸時，順便更換 url 的 anchor 可以這樣寫：

$(window).on('activate.bs.scrollspy', function (e, obj) {
  window.history.replaceState(null, null, obj.relatedTarget);
});

Bootstrap 4 activate.bs.scrollspy event is not firing @ StackOverflow