原理

點擊按鈕，靠著控制指定目標的 class 名稱，搭配 CSS 來做到動態效果。可以用來做選單開關，樣式變換等等功能，只要 CSS 能做到的效果，就用 CSS 來做。

HTML

只要點擊 button 就能讓 div#bar 的 class=”foo” 出現或消失。

<button data-toggle-class="foo" data-target="#bar" type="button">開關</button>
<div id="bar"></div>

JavaScript (vanilla)

不需要 jQuery，只需短短幾行，就能讓網頁充滿萬千變化。

const toggleClass  = document.querySelectorAll('[data-toggle-class]');
if (toggleClass) {
  for (let i = 0; i < toggleClass.length; i += 1) {
    const elem = toggleClass[i];
    elem.addEventListener('click', () => {
      const className = elem.getAttribute('data-toggle-class');
      const target = elem.getAttribute('data-target').slice(1);
      document.getElementById(target).classList.toggle(className);
    });
  }
}