借助HTML5 details,summary无JS实现各种交互效果
<details>
标签在Chrome,Firefox等浏览器下默认是有展开收起行为的;通过在<details>
标签上添加布尔类型的open
属性,可以让我们的详情信息默认就是展开状态;<summary>
标签如果缺省,则<details>
元素会在内部自动创建一个<summary>
内容,默认的文案是“详细信息”。本文主要通过一些示例,介绍了HTML5中的<details>
和<summary>
在不需要借助任何JavaScript就可以实现一些常见的交互效果。
大漠
阅读全文