我的項(xiàng)目使用Bootstrap，大部分時(shí)間不使用任何Javascript，因?yàn)槲抑恍枰獦邮健，F(xiàn)在我有一個(gè)項(xiàng)目，需要像他們的手風(fēng)琴一樣的東西，需要Javascript來工作。但是有一個(gè)標(biāo)準(zhǔn)& lt詳情& gtHTML標(biāo)簽可以做到這一點(diǎn)。問題是我真的不能把手風(fēng)琴風(fēng)格運(yùn)用到它上面。

這是我迄今為止最好的嘗試，但是手風(fēng)琴式的頭也簡(jiǎn)單地包裹了所有的身體:

<link  rel="stylesheet"/>

<div class="accordion">
    <details class="accordion-item">
        <summary class="">
            <div class="accordion-header">
                Title
            </div>
        </summary>

        <div class="accordion-body">
            <p>This is the body</p>
        </div>
    </details>
</div>

我不太清楚您所說的標(biāo)題包裝正文是什么意思，但是將accordion-button類放在title元素上可以讓您更接近這個(gè)意思。不過，圖標(biāo)不會(huì)翻轉(zhuǎn)。這需要JavaScript或定制的CSS解決方案。

<link  rel="stylesheet" />

<div class="accordion m-4">
  <details class="accordion-item">
    <summary class="accordion-button">
      <div class="accordion-header">
        Title
      </div>
    </summary>

    <div class="accordion-body">
      <p>This is the body</p>
    </div>
  </details>
</div>