HTML5实现交互效果

了解HTML5 details, summary默认交互行为

<details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：

<details>    
     <summary>折叠效果</summary>
    <p>这里具体描述，标签相对随意，例如这里使用的&lt;p&gt;标签。</p>
</details>

只显示了<summary>标签内容，而<p>默认隐藏了；
<summary>标签前面出现了一个小三角；

展开与收起是通过open属性控制的

通过在<details>标签上添加布尔类型的open属性，可以让我们的详情信息默认就是展开状态，如下HTML示意：

<details open>
    <summary>折叠展开</summary>
    <content>这里&lt;details&gt;标签设置了HTML布尔属性open，因此，默认是展开状态。</content>
</details>

自动展开

details浏览器内置UI可以自定义

HTML代码如下：

<details class="details-1" open>
    <summary>这是示例1</summary>
    <content>本案例展示对小三角UI重定义：包括显示在右侧，颜色减淡等。</content>
</detail