纯css完成多级别折叠菜单折叠树实际效果

日期:2021-03-01 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

1、应用checkbox的checked值来分辨下级栏目是不是进行,CSS3的挑选器中出示了:checked 这个伪类,这个伪类出示大家,当元素有着checked这个值的情况下就实行你的CSS。

当有子菜单时,菜单项右边有向下的箭头,当收起菜单项时,箭头朝上。照片能够自身更换。

2、实际效果图

3、编码片断

<ol class="tree">  
       <li>  
           <label for="folder1" class="folderOne">泽元架构</label> <input type="checkbox" id="folder1" /> 
           <ol>  
                <li>  
                   <label for="subfolder1"class="folderTwo">开发设计标准</label> <input type="checkbox" id="subfolder1"  />   
                   <ol>  
                       <li class="file folderThree"><a href="#">普遍页面不正确举例</a></li>  
                       <li class="file folderThree"><a href="#">有关发售汇报对BUG管理方法提出…</a></li>  
                       <li class="file folderThree"><a href="#">软件內部JAVA包取名标准</a></li>  
                   </ol>  
               </li> 
                <li class="file folderTwo"><a href="#">简述</a></li>  
                <li class="file folderTwo"><a href="#">服务器群集</a></li>  
                <li class="file folderTwo"><a href="#">模版</a></li>  
                <li class="file folderTwo"><a href="#">安全性体制</a></li>   
           </ol>  
  
       </li>  
       <li>  
           <label for="folder2" class="folderOne" >ZCMS</label> <input type="checkbox" id="folder2" />   
           <ol>  
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
               <li>  
                   <label for="subfolder2" class="folderTwo">即时数据信息</label> <input type="checkbox" id="subfolder2"  />   
                   <ol>  
                       <li class="file folderThree"><a href="#">即时数据信息</a></li>  
                       <li class="file folderThree"><a href="#">即时数据信息</a></li>  
                       <li class="file folderThree"><a href="#">即时数据信息</a></li>  
                   </ol>  
               </li>  
           </ol>  
       </li> 
       <li>  
           <label for="folder3"  class="folderOne">ZAS</label> <input type="checkbox" id="folder3" />   
           <ol>  
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
           </ol>  
       </li> 
       <li>  
           <label for="folder4"  class="folderOne">ZHTML标识</label> <input type="checkbox" id="folder4"/>   
           <ol>  
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
           </ol>  
       </li> 
       <li>  
           <label for="folder5"  class="folderOne">UI架构API手册</label> <input type="checkbox" id="folder5"/>   
           <ol>  
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
               <li class="file folderTwo"><a href="#">即时数据信息</a></li> 
           </ol>  
       </li> 
   </ol>

<style type="text/css">  
    .tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}  
    /*掩藏input*/
    .tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}  
    /*全部菜单项设定统1款式*/
    .tree li {position: relative;list-style: none;}   
    /*1级菜单加下边线*/
    .tree>li{border-bottom: 1px solid #d9d9d9;}
    /*给有子菜单的菜单项加上情况标志*/
    .tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 ⑸0px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }  
    .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}
    /*消除全部进行的子菜单的display*/
    .tree li input + ol{display: none;}  
    /*当input被选定时,给全部进行的子菜单设定款式*/
    .tree input:checked + ol {padding-left:14px;height: auto;display: block;}  
    .tree input:checked + ol > li { height: auto;}  
    /*末层菜单为A标识,设定款式*/
    .tree li.file a{margin:0 ⑴0px 0 ⑸0px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#333333;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;} 
    .tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;} 
    /*不一样等级的菜单字体样式尺寸不一样*/
    .tree .folderOne{font-size: 18px;}
    .tree .folderTwo{font-size:16px;}
    .tree .folderThree{font-size:14px;}
</style>

<script type="text/javascript">
       $(document).ready(function() {
           //每一个有子菜单的菜单项加上点一下恶性事件
           $(".tree label").click(function(){
               //获得当今菜单周围input的check情况
               var isChecked = $(this).next("input[type='checkbox']").is(':checked');
               //进行和收齐的不一样情况下拆换右边小标志
               if(isChecked){
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-b.png)"
                   );
               }else{
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-t.png)"
                   );
               }
           });
            
       });
   </script>

下面详细介绍下CSS 菜单折叠

先给大伙儿展现实际效果图:

如上,假定1级菜单是 div,2级菜单是 ul。形如:

<div>业务流程管理方法<span></span></div>
<ul>
...
<ul>

<div class="collapsed">汇总剖析<span></span></</div>
<ul>
...
<ul>

<div class="collapsed">>系统软件管理方法<span></span></</div>
<ul>
...
<ul>

当菜单进行时,左侧有1个蓝色的标识,右侧是折叠标识。

左侧蓝色标识自无需表,CSS 设定 border 便可,右侧运用 CSS 也超便捷。

div span { float:right; padding-right:20px; }
div span:after { content: "∨" }
div.collapsed span:after { content: "∧" }

随后再说子菜单的折叠实际效果,有动漫噢:

div.collapsed + ul { height: 0px; transition: height 0.5s ease-out; }
div ul { height: 80px; transition: height 0.5s ease-in; }

留意 ul 1定要有 height 的实际值,假如沒有实际指明是多少 px,则尽管能折叠,可是沒有动漫实际效果。

最终便是运用 jQuery 或 ezj 切换 className 了,当点一下 div 的情况下 toggleClass("collapsed")

总结

以上所述是网编给大伙儿详细介绍的纯css完成多级别折叠菜单折叠树实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!