<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)建一個(gè)Accordion類。這樣，我們就可以在頁(yè)面上的每個(gè)<details></details>元素上調(diào)用new Accordion()。

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

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

構(gòu)造函數(shù)用于存儲(chǔ)每個(gè)手風(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ù)中，我們會(huì)檢查元素是否正在進(jìn)行動(dòng)畫(huà)（關(guān)閉或展開(kāi)）。如果用戶在元素正在動(dòng)畫(huà)時(shí)點(diǎn)擊手風(fēng)琴，我們需要進(jìn)行此檢查。如果點(diǎn)擊速度過(guò)快，我們不希望手風(fēng)琴?gòu)耐耆归_(kāi)跳到完全關(guān)閉。<details></details>元素在打開(kāi)時(shí)，瀏覽器會(huì)為其添加一個(gè)open屬性。我們可以通過(guò)this.el.open來(lái)獲取該屬性的值。

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非常相似。我們需要定義動(dòng)畫(huà)的起始和結(jié)束關(guān)鍵幀。在本例中，我們只需要兩個(gè)關(guān)鍵幀，第一個(gè)是元素的當(dāng)前高度，第二個(gè)是手風(fēng)琴關(guān)閉后的高度。當(dāng)前高度存儲(chǔ)在startHeight變量中。關(guān)閉高度存儲(chǔ)在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ù)在我們要展開(kāi)手風(fēng)琴時(shí)調(diào)用。此函數(shù)目前不控制手風(fēng)琴的動(dòng)畫(huà)。首先，我們計(jì)算<details></details>元素的高度，并使用內(nèi)聯(lián)樣式將其應(yīng)用于元素。完成后，我們可以設(shè)置其open屬性以使內(nèi)容可見(jiàn)，但由于我們對(duì)元素設(shè)置了overflow: hidden和固定高度，因此內(nèi)容仍然隱藏。然后，我們等待下一幀調(diào)用expand()函數(shù)并為元素創(chuàng)建動(dòng)畫(huà)。

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

expand()

expand()函數(shù)類似于shrink()函數(shù)，但它不是從當(dāng)前高度動(dòng)畫(huà)到關(guān)閉高度，而是從元素的高度動(dòng)畫(huà)到結(jié)束高度。結(jié)束高度等于<summary></summary>的高度加上內(nèi)部?jī)?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ù)在收縮或展開(kāi)動(dòng)畫(huà)結(jié)束時(shí)調(diào)用。如您所見(jiàn)，有一個(gè)參數(shù)open，在手風(fēng)琴打開(kāi)時(shí)設(shè)置為true，允許我們?cè)O(shè)置元素上的openHTML屬性，因?yàn)樗辉儆蔀g覽器處理。

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中的每個(gè)<details></details>元素使用我們的Accordion類。為此，我們使用<details></details>標(biāo)簽上的querySelectorAll，并為每個(gè)元素創(chuàng)建一個(gè)新的Accordion實(shí)例。

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

注意

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

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

此外，不要在<summary></summary>和內(nèi)容之間添加邊距，因?yàn)樗粫?huì)計(jì)算高度關(guān)鍵幀。相反，直接在內(nèi)容上使用填充來(lái)添加一些間距。

總結(jié)

就這樣，我們使用JavaScript創(chuàng)建了一個(gè)漂亮的手風(fēng)琴動(dòng)畫(huà)，無(wú)需任何庫(kù)！

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