<details>
  <summary>手風(fēng)琴標(biāo)題</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
    </p>
  </div>
</details>

Accordion類

為了提高代碼的可重用性，我們應(yīng)該創(chuàng)建一個Accordion類。這樣，我們就可以在頁面上的每個<details></details>元素上調(diào)用new Accordion() 。

 class Accordion {
  constructor(el) {}
  onClick(e) {}
  shrink() {}
  open() {}
  expand() {}
  onAnimationFinish(open) {}
}

構(gòu)造函數(shù)constructor()

構(gòu)造函數(shù)用於存儲每個手風(fēng)琴所需的數(shù)據(jù)。

 constructor(el) {
  this.el = el;
  this.summary = el.querySelector('summary');
  this.content = el.querySelector('.content');
  this.animation = null;
  this.isClosing = false;
  this.isExpanding = false;
  this.summary.addEventListener('click', (e) => this.onClick(e));
}

onClick()

在onClick()函數(shù)中，我們會檢查元素是否正在進(jìn)行動畫（關(guān)閉或展開）。如果用戶在元素正在動畫時點擊手風(fēng)琴，我們需要進(jìn)行此檢查。如果點擊速度過快，我們不希望手風(fēng)琴從完全展開跳到完全關(guān)閉。<details></details>元素在打開時，瀏覽器會為其添加一個open屬性。我們可以通過this.el.open來獲取該屬性的值。

 onClick(e) {
  e.preventDefault();
  this.el.style.overflow = 'hidden';
  if (this.isClosing || !this.el.open) {
    this.open();
  } else if (this.isExpanding || this.el.open) {
    this.shrink();
  }
}

shrink()

此shrink()函數(shù)使用WAAPI的.animate()函數(shù)。您可以閱讀MDN文檔了解更多信息。 WAAPI與CSS @keyframes非常相似。我們需要定義動畫的起始和結(jié)束關(guān)鍵幀。在本例中，我們只需要兩個關(guān)鍵幀，第一個是元素的當(dāng)前高度，第二個是手風(fēng)琴關(guān)閉後的高度。當(dāng)前高度存儲在startHeight變量中。關(guān)閉高度存儲在endHeight變量中，等於<summary></summary>的高度。

 shrink() {
  this.isClosing = true;
  const startHeight = `${this.el.offsetHeight}px`;
  const endHeight = `${this.summary.offsetHeight}px`;
  if (this.animation) {
    this.animation.cancel();
  }
  this.animation = this.el.animate({
    height: [startHeight, endHeight]
  }, {
    duration: 400,
    easing: 'ease-out'
  });
  this.animation.onfinish = () => this.onAnimationFinish(false);
  this.animation.oncancel = () => this.isClosing = false;
}

open()

open()函數(shù)在我們要展開手風(fēng)琴時調(diào)用。此函數(shù)目前不控製手風(fēng)琴的動畫。首先，我們計算<details></details>元素的高度，並使用內(nèi)聯(lián)樣式將其應(yīng)用於元素。完成後，我們可以設(shè)置其open屬性以使內(nèi)容可見，但由於我們對元素設(shè)置了overflow: hidden和固定高度，因此內(nèi)容仍然隱藏。然後，我們等待下一幀調(diào)用expand()函數(shù)並為元素創(chuàng)建動畫。

 open() {
  this.el.style.height = `${this.el.offsetHeight}px`;
  this.el.open = true;
  window.requestAnimationFrame(() => this.expand());
}

expand()

expand()函數(shù)類似於shrink()函數(shù)，但它不是從當(dāng)前高度動畫到關(guān)閉高度，而是從元素的高度動畫到結(jié)束高度。結(jié)束高度等於<summary></summary>的高度加上內(nèi)部內(nèi)容的高度。

 expand() {
  this.isExpanding = true;
  const startHeight = `${this.el.offsetHeight}px`;
  const endHeight = `${this.summary.offsetHeight this.content.offsetHeight}px`;
  if (this.animation) {
    this.animation.cancel();
  }
  this.animation = this.el.animate({
    height: [startHeight, endHeight]
  }, {
    duration: 400,
    easing: 'ease-out'
  });
  this.animation.onfinish = () => this.onAnimationFinish(true);
  this.animation.oncancel = () => this.isExpanding = false;
}

onAnimationFinish()

此函數(shù)在收縮或展開動畫結(jié)束時調(diào)用。如您所見，有一個參數(shù)open ，在手風(fēng)琴打開時設(shè)置為true ，允許我們設(shè)置元素上的open HTML屬性，因為它不再由瀏覽器處理。

 onAnimationFinish(open) {
  this.el.open = open;
  this.animation = null;
  this.isClosing = false;
  this.isExpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

設(shè)置手風(fēng)琴

我們完成了代碼的大部分工作！

剩下的就是為HTML中的每個<details></details>元素使用我們的Accordion類。為此，我們使用<details></details>標(biāo)籤上的querySelectorAll ，並為每個元素創(chuàng)建一個新的Accordion實例。

 document.querySelectorAll('details').forEach((el) => {
  new Accordion(el);
});

注意

為了計算關(guān)閉高度和打開高度，我們需要確保<summary></summary>和內(nèi)容始終具有相同的高度。

例如，不要嘗試在<summary></summary>打開時添加填充，因為這可能會導(dǎo)致動畫過程中出現(xiàn)跳躍。內(nèi)部內(nèi)容也是如此——它應(yīng)該具有固定高度，我們應(yīng)該避免在打開動畫過程中高度發(fā)生變化的內(nèi)容。

此外，不要在<summary></summary>和內(nèi)容之間添加邊距，因為它不會計算高度關(guān)鍵幀。相反，直接在內(nèi)容上使用填充來添加一些間距。

總結(jié)

就這樣，我們使用JavaScript創(chuàng)建了一個漂亮的手風(fēng)琴動畫，無需任何庫！

請注意，圖片的路徑/uploads/20250331/174338369667e9ec90190a3.jpg需要替換成實際的圖片路徑。 我無法訪問或處理圖片文件，所以只能保留原始格式。