<details>
  <summary>アコーディオンタイトル</summary>
  <div class="content">
    <p>
      lorem ipsum dolor sit amet、condsetur apisicing elit。 Modi Unde、ex remは、autem aliquid veniam quis tomeibus rupudiandae illo、Nostrum、pariatur quae！ Animi Modi Dignissimos Corurdi Placeeat boluptatumで！
    </p>
  </div>
</details>

アコーディオンクラス

コードの再利用性を向上させるには、アコーディオンクラスを作成する必要があります。これにより、すべてを使用できます<details></details>要素にnew Accordion()を呼び出します。

クラスアコーディオン{
  コンストラクター（el）{}
  onclick（e）{}
  縮む（） {}
  開(kāi)ける（） {}
  拡大する（） {}
  onanimationfinish（open）{}
}

constructor()

コンストラクターは、各アコーディオンに必要なデータを保存するために使用されます。

コンストラクター（el）{
  this.el = el;
  this.summary = el.queryselector（ 'summary'）;
  this.content = el.queryselector（ '。コンテンツ'）;
  this.Animation = null;
  this.isslosing = false;
  this.isexpanding = false;
  this.summary.addeventlistener（ 'click'、（e）=> this.onclick（e））;
}

onClick()

onClick()関數(shù)では、要素がアニメーション化されているかどうかを確認(rèn)します（閉じるか展開(kāi)）。要素がアニメーション化されている間にユーザーがアコーディオンをクリックした場(chǎng)合、このチェックを行う必要があります。クリック速度が速すぎる場(chǎng)合、アコーディオンが完全に拡張されて完全に閉じてジャンプすることを望まない。<details></details>要素が開(kāi)かれると、ブラウザはそれにopenプロパティを追加します。 this.el.openを使用して、このプロパティの価値を取得できます。

 onclick（e）{
  E.PreventDefault（）;
  this.el.style.overflow = 'hidden';
  if（this.isslosing ||！this.el.open）{
    this.open（）;
  } else if（this.isexpanding || this.el.open）{
    this.shrink（）;
  }
}

shrink()

このshrink()関數(shù)は、WAAPIの.animate()関數(shù)を使用します。詳細(xì)については、MDNドキュメントを読むことができます。 WAAPIはCSS @keyframesに非常に似ています。アニメーションのキーフレームの開(kāi)始と終了を定義する必要があります。この例では、2つのキーフレームのみが必要です。1つ目は要素の現(xiàn)在の高さで、2つ目はアコーディオンが閉じた後の高さです。現(xiàn)在の高さは、 startHeight変數(shù)に保存されます。近い高さは、 endHeight変數(shù)に保存され、<summary></summary>身長(zhǎng)。

縮む（） {
  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.anime（{{
    高さ：[startheight、endheight]
  }、{
    期間：400、
    使いやすさ：「簡(jiǎn)単」
  }）;
  this.animation.onfinish =（）=> this.onimationfinish（false）;
  this.animation.oncancel =（）=> this.isclosing = false;
}

open()

open()関數(shù)は、アコーディオンを拡張したいときに呼び出されます?，F(xiàn)在、この関數(shù)はアコーディオンアニメーションを制御していません。最初に、計(jì)算します<details></details>要素の高さと、インラインスタイルを使用して要素に適用します。完了したら、 openプロパティを設(shè)定してコンテンツを表示することができますが、 overflow: hiddenと固定された高さを設(shè)定しているため、コンテンツはまだ隠されています。次に、次のフレームがexpand()関數(shù)を呼び出し、要素のアニメーションを作成するのを待ちます。

開(kāi)ける（） {
  this.el.style.height = `$ {this.el.offseTheight} px`;
  this.el.open = true;
  window.requestanimationframe（（）=> this.expand（））;
}

expand()

expand()関數(shù)はshrink()関數(shù)に似ていますが、現(xiàn)在の高さから近い高さまでではなく、要素の高さから端の高さまでアニメーション化します。端の高さはに等しい<summary></summary>高さと內(nèi)部コンテンツの高さ。

拡大する（） {
  this.isexpanding = true;
  const startheight = `$ {this.el.offsetheight} px`;
  const endheight = `$ {this.summary.offseetheight this.content.offseeth} px`;
  if（this.Animation）{
    this.animation.cancel（）;
  }
  this.Animation = this.el.anime（{{
    高さ：[startheight、endheight]
  }、{
    期間：400、
    使いやすさ：「簡(jiǎn)単」
  }）;
  this.animation.onfinish =（）=> this.onimationfinish（true）;
  this.animation.oncancel =（）=> thisexpanding = false;
}

onAnimationFinish()

この関數(shù)は、アニメーションが崩壊または拡張されたときに呼び出されます。ご覧のとおり、アコーディオンがオンになったときにtrueに設(shè)定されているパラメーターがopenいるため、ブラウザでは処理されなくなったため、 open HTML屬性を要素に設(shè)定できます。

 onanimationfinish（open）{
  this.el.open = open;
  this.Animation = null;
  this.isslosing = false;
  this.isexpanding = false;
  this.el.style.height = this.el.style.overflow = '';
}

アコーディオンをセットアップします

ほとんどのコードを行いました！

殘っているのは、それぞれのHTMLだけです<details></details>要素はアコーディオンクラスを使用します。これを行うには、使用します<details></details>タグにquerySelectorAllを使用し、各要素の新しいAccordionインスタンスを作成します。

 document.QuerySelectorall（ '詳細(xì)'）。foreach（（el）=> {
  新しいアコーディオン（el）;
}）;

知らせ

近い高さと開(kāi)いた高さを計(jì)算するには、確実にする必要があります<summary></summary>常にコンテンツと同じ高さを持っています。

たとえば、試してはいけません<summary></summary>電源を入れたときにパディングを追加します。これにより、アニメーションプロセス中にジャンプが発生する可能性があります。內(nèi)部コンテンツにも同じことが言えます。固定された高さが必要です。アニメーションの開(kāi)口部中に高さの変化があるコンテンツを避ける必要があります。

また、しないでください<summary></summary>高さキーフレームを計(jì)算しないため、コンテンツ間にマージンを追加します。代わりに、コンテンツにパディングを直接使用して、間隔を追加します。

要約します

それだけです、私たちはライブラリを必要とせずにJavaScriptを使用して美しいアコーディオンアニメーションを作成しました！

Image Path /uploads/20250331/174338369667e9ec90190a3.jpg 、実際の畫(huà)像パスに置き換える必要があることに注意してください。畫(huà)像ファイルにアクセスまたは処理できないため、元の形式のみを保持できます。