Skip to main content

[BS4] Bootstrap 4 JavaScript

關鍵字: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();

Nav Tab#

$('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