通过HTML中的details标签实现Markdown中的折叠面板

某些GitHub项目的Readme中,会有这种点开才显示详情的折叠面板

实现方式是使用HTML的details标签,这个标签的详细用法见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details

例如:

### 以下内容需要点开才能看

<details>
这是详情内容

第二行

第三行
</details>

效果如下:

以下内容需要点开才能看

这是详情内容

第二行

第三行

如果需要自定义标题,可以用summary标签

### 以下内容需要点开才能看(自定义标题)

<details>
<summary><strong>我是标题</strong></summary>

这是详情内容

第二行

第三行

</details>

以下内容需要点开才能看

我是标题

这是详情内容

第二行

第三行

文章原始链接:https://sijie.wang/posts/html-details/

本站文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请保留原始链接