纯css怎样实现多级折叠菜单折叠树效果

  介绍

这篇文章将为大家详细讲解有关纯css怎样实现多级折叠菜单折叠树效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1,运用复选框的检查值来判断下级栏目是否展开,CSS3的选择器中提供了:检查这个伪类,这个伪类提供我们,当元素拥有检查这个值的时候就执行你的css。

当有子菜单时,菜单项右侧有向下的箭头,当收起菜单项时,箭头朝上。图片可以自己替换。

2,效果图

纯css怎样实现多级折叠菜单折叠树效果

3代码片段

& lt; ol 类=皌ree"祝辞,,   ,,,,,,& lt; li>,,   ,,,,,,,,,,& lt; label 为=癴older1",类=癴olderOne"在泽元框架& lt;/label>, & lt; input 类型=癱heckbox", id=癴older1",/祝辞,   ,,,,,,,,,,& lt; ol>,,   ,,,,,,,,,,,,,,,& lt; li>,,   ,,,,,,,,,,,,,,,,,,& lt; label 为=皊ubfolder1"类=癴olderTwo"在开发规范& lt;/label>, & lt; input 类型=癱heckbox", id=皊ubfolder1",,/在,,,   ,,,,,,,,,,,,,,,,,,& lt; ol>,,   ,,,,,,,,,,,,,,,,,,,,,,& lt; li 类=癴ile  folderThree"祝辞& lt; https://www.yisu.com/zixun/a  href=" # ">常见界面错误举例   <李class="文件folderThree "> 关于发行报告对缺陷管理提出…   <李class="文件folderThree "> 插件内部JAVA包命名规范      李   <李class="文件folderTwo "> 概述   <李class="文件folderTwo "> 服务器集群   <李class="文件folderTwo "> 模板   <李class="文件folderTwo "> 安全机制         李   <李>   <标签=" folder2”class=" folderOne "> ZCMS   
      <李class="文件folderTwo "> 实时数据   <李>   <标签=" subfolder2”class=" folderTwo ">实时数据   
        <李class="文件folderThree "> 实时数据   <李class="文件folderThree "> 实时数据   <李class="文件folderThree "> 实时数据   
      李   
  李   <李>   <标签=" folder3”class=" folderOne ">咱   
      <李class="文件folderTwo "> 实时数据   <李class="文件folderTwo "> 实时数据   
  李   <李>   <标签=" folder4”class=" folderOne "> ZHTML标签   
      <李class="文件folderTwo "> 实时数据   <李class="文件folderTwo "> 实时数据   
  李   <李>   <标签=" folder5”class=" folderOne "> UI框架API手册   
      <李class="文件folderTwo "> 实时数据   <李class="文件folderTwo "> 实时数据   
  李         <风格type=" text/css ">   .tree{保证金:0;填充:0;background - color: # f2f2f2;溢出:隐藏;}   输入*//*隐藏   李.tree输入{:绝对;左:0;不透明度:0;z - index: 2;游标:指针;高度:1 em;宽度:1 em;: 0;}/*所有菜单项设置统一样式*/李.tree{位置:相对;list-style:没有;}/*一级菜单加下边线*/李.tree>{边界底部:1 px固体# d9d9d9;}/*给有子菜单的菜单项添加背景图标*/图片/cp-detail-arrow-b.png)没有重演对中心;背景位置:95% - 50%;空白:nowrap;}溢出:隐藏;文本溢出:省略;}   .tree李标签:悬停,李标签:专注{background - color: # a7a7a7;颜色:# fff;}/*清除所有展开的子菜单的显示*/李.tree输入+ ol{显示:没有;}/*当输入被选中时,给所有展开的子菜单设置样式*/.tree输入:检查+ ol {padding-left: 14 px;高度:汽车;显示:块;}   李.tree输入:检查+ ol>{高度:汽车;}/*末层菜单为一个标签,设置样式*/.tree李。文件{优势:0 -10 px 0 -50 px;填充:15 px 20 px 15 px 70 px;文字修饰:没有,显示:块;颜色:# 333333;空白:nowrap;}溢出:隐藏;文本溢出:省略号;}   .tree李。文件:悬停,李。文件:专注{background - color: # a7a7a7;颜色:# fff;}/*不同层级的菜单字体大小不同*/.tree .folderOne{字体大小:18 px;}   .tree .folderTwo{字体大小:16 px;}   .tree .folderThree{字体大小:14 px;}>

纯css怎样实现多级折叠菜单折叠树效果