Chia Yi Lai

JavaScript 最好用的一招 – toggle class

原理

點擊按鈕,靠著控制指定目標的 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++) {
    toggleClass[i].addEventListener('click', () => {
      const className = toggleClass[i].getAttribute('data-toggle-class');
      const target = toggleClass[i].getAttribute('data-target').slice(1);
      document.getElementById(target).classList.toggle(className);
    });
  }
}
keyboard_arrow_up