我的项目使用Bootstrap,大部分时间没有任何Javascript,因为我只需要样式。现在我有一个项目,需要像他们的Accordion,需要Javascript的工作。但是有一个标准的<details>
HTML tag可以做到这一点。问题是我不能真正应用 accordion 样式。
这是我迄今为止最好的尝试,但accordion-header
也只是简单地 Package 了所有的主体:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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
。
1条答案
按热度按时间w6lpcovy1#
我不太清楚您所说的头部包裹主体是什么意思,但是将
accordion-button
类放在title元素上可以让您接近它。但图标不会翻转。这需要JavaScript或自定义CSS解决方案。