插件描述：纯HTML5 打造，无 javascript 代码
HTML5 <details>
定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
浏览器支持
目前只有 Chrome（谷歌浏览器） 支持 <details> 标签。
<details>下必须包含一个且只能一个<summary>。
与 <summary> 标签 配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
属性
open
语义：<details open>
解释：定义 details 是否可见。
HTML代码
<details class="menu" open> <summary>菜单1</summary> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </details>
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;*/ /*展开时的图片*/
}
PREVIOUS:
NEXT:
相关插件-垂直导航,手风琴菜单
讨论这个项目（14）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
my heart 0
2016/3/8 17:03:42
-
火狐浏览器也不行，上面明明显示可以的。。。什么东西都能发上去。。。。。
说破。0
2016/3/8 17:03:34
-
呵呵，你火狐不支持，你把这个选项去掉试试，你要能把这个去掉你就牛逼了（发布的时候只能选择IE版本，其它都是默认选中的，没法改好么），没发不过资源不要说话，再说我下面文档里都强调过了，只有谷歌浏览器支持，看不见么！！！
ng70430
2016/6/30 14:06:50
-
我觉得你不支持火狐就不要发出来，真的
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
