下载掌阅APP，畅读海量书库
立即打开
样式可任意自定义，那岂不意味着平日里那些通过点击行为触发的展开与收起效果都可以使用纯HTML代码实现了？还真是这样的！
1.悬浮菜单，自定义下拉框等效果
只要是点击行为触发的悬浮菜单，或者是自定义的下拉框效果，都可以使用<details>/<summary>元素实现。参考如下所示的HTML代码：
此时，只需要设置<menu>元素绝对定位，悬浮菜单效果就可以实现了，如图3-9所示。
图3-9 悬浮菜单效果
2.多项菜单折叠效果
在有些产品中，侧边栏菜单数量会很多，因此会有展开与收起的效果，此时，非常适合使用<details>/<summary>元素来实现，例如，下面的HTML代码：
无须使用任何额外的JavaScript代码，各个菜单项天然支持展开和收起，图3-10所示的就是“关注中心”收起，其他菜单项展开的效果。另外，如果希望每次最多只展开一个菜单项，可以给<details>元素设置相同的name属性值，详见第3.1.4节。
图3-10 “关注中心”收起，其他菜单项展开的效果
3.多级嵌套的树形菜单效果
<details>元素还支持嵌套，且没有层级限制，因而使用<details>/<summary>元素实现树形菜单效果也不在话下。
例如，下面的HTML代码：
然后，我们只需要给嵌套的<details>元素设置合适的缩进，再自定义<summary>元素的小三角图标，就可以实现最终的效果了，如图3-11所示。
图3-11 多级嵌套的树形菜单效果
以上所有演示案例的交互效果以及完整代码均可以通过在浏览器中输入地址https://www.htmlapi.cn/3/1-3.html或扫码访问来体验。
总而言之一句话，<details>元素非常实用，是所有HTML元素中为数不多的和点击交互强相关的元素。