我可以将 Bootstrap 的 Accordion 或 Alert 样式应用到 HTML 详细信息和摘要元素吗？

Question

我的项目使用 Bootstrap，大多数时候没有任何 Javascript，因为我只需要样式。现在我有一个项目需要像他们的 Accordion 这样的东西，它需要 Javascript 才能工作。然而，有一个标准的

<details>

HTML 标签 可以做到这一点。 问题是我无法真正对其应用手风琴样式。

这是我迄今为止最好的尝试，但

accordion-header

也简单地包裹了整个身体：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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>

另一种选择是让

summary

看起来像

.alert

。

Answer 1

我不太确定标题包裹正文的含义，但是将

accordion-button

类放在标题元素上可以让您接近。但图标不会翻转。这需要 JavaScript 或自定义 CSS 解决方案。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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>

---

对于支持手风琴 CSS 变量的 Bootstrap 5.2+，您可以添加这些 CSS，以便箭头在用户打开/关闭时发生变化：

details.accordion-item:not([open]) .accordion-button {
    background-color: var(--bs-accordion-bg);
}

details.accordion-item:not([open]) .accordion-button::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: unset;
}

details.accordion-item[open] .accordion-button::after {
    background-image: var(--bs-accordion-btn-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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>