纯HTML5 打造,无 JS 代码,干净简单。
当然由于是HTML5的,所以低端浏览器不支持。
IE浏览器仅支持IE11以上,谷歌、火狐、苹果浏览器均支持
定义和用法
标签用于描述文档或文档某个部分的细节。
浏览器支持
目前只有 Chrome(谷歌浏览器) 支持 标签。
下必须包含一个且只能一个。
与 标签 配合使用,可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
属性
open
语义:
解释:定义 details 是否可见。
HTML代码
菜单1
- 子菜单1
- 子菜单2
CSS代码
跟普通标签一样修饰,这里主要讲一下标签的特定样式/*去掉自带的小三角*/
details summary::-webkit-details-marker {
display: none;
}
/*自定义图标,可用图片或字符,如果使用图片,请把content的值设置成空字符*/
/*展开*/
.menu summary:before {
content: "+";
/*background: url(../Images/right.png) no-repeat center center;*/ /*收起时的图片*/
/*vertical-align: middle;*/
}
/*收起*/
.menu[open] summary:before {
content: "-";
/*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/
}
具体效果请看演示,一流资源网推荐下载。