Bootstrap 手风琴短代码
用于构建垂直手风琴的短代码，FAQ 是最常见的用例。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
语法
1{{< bs/accordion >}}
参数
data
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
不带扩展名的数据文件名称。
flush
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | flush | boolean | - | false | - | - |
为 true 时，去除边框和圆角，使手风琴与其父容器的边对边呈现。
alwaysOpen
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | alwaysOpen | boolean | - | false | - | - |
为 true 时，当另一个条目打开时，使手风琴条目保持打开状态。
数据文件映射
| Path | Data |
|---|---|
data/faq.yaml | faq |
data/faq.toml | faq |
data/faq.json | faq |
data/sub/faq.yaml | sub.faq |
data/sub/faq.toml | sub.faq |
data/sub/faq.json | sub.faq |
数据条目属性
title
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
title | - | string | - | - | - | - |
标题。
content
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
content | - | string | - | - | - | - |
内容，支持 Markdown。
weight
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
weight | - | string | - | - | - | - |
权重，值越小权重越高。
show
| 名称 | 上下文 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
show | - | string | - | - | - | - |
默认显示第一个条目，不过你可以通过该属性改变。
数据文件示例
data/accordion/faq.yaml
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="ln">1</span><span class="cl">- <span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Q1</span><span class="w">
2 content: A1, … 3- title: Q2 4 content: A2, …
示例
默认手风琴示例
源码
1{{< bs/accordion "accordion.faq" >}}结果
A1, …
A2, …
Flush 手风琴示例
源码
1{{< bs/accordion data="accordion.faq" flush=true >}}结果
A1, …
A2, …
总是打开的 Flush 手风琴示例
源码
1{{< bs/accordion data="accordion.faq" flush=true alwaysOpen=true >}}结果
A1, …
A2, …