HTML5 折叠菜单

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;*/ /*展开时的图片*/
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com