三级侧边栏-树形菜单案例效果

效果图：

本次制作要点：

 

html：

结构上，要把li内部的文字和待展开的元素分开来，便于后期样式上的把控和逻辑上的处理。

 1 <div class="sidebar-list">
 2           <ul class="first-class">
 3             <li class="first-class-li cur"><a href="javascript:;"><i class="icon icon-activity"></i>个人报表</a>
 4               <ul class="sec-class" style="display:block;">
 5                 <li class="sec-class-li cur"><a href="javascript:;"><i class="icon icon-order"></i>今日报表</a>
 6                   <ul class="thr-class" style="display:block;">
 7                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
 8                     <li class="thr-class-li cur"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
 9                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
10                   </ul>
11                 </li>
12                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>历史报表</a>
13                   <ul class="thr-class">
14                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
15                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
16                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
17                   </ul>
18                 </li>
19                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>计划报表</a>
20                   <ul class="thr-class">
21                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
22                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
23                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
24                   </ul>
25                 </li>
26               </ul>
27             </li>
28             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-collection"></i>个人收藏</a>
29               <ul class="sec-class">
30                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>报表收藏</a>
31                   <ul class="thr-class">
32                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
33                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
34                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
35                   </ul>
36                 </li>
37                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>图片收藏</a>
38                   <ul class="thr-class">
39                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
40                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
41                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
42                   </ul>
43                 </li>
44                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>账户收藏</a>
45                   <ul class="thr-class">
46                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
47                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
48                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
49                   </ul>
50                 </li>
51               </ul>
52             </li>
53             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-share"></i>我的分享</a>
54               <ul class="sec-class">
55                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-praise"></i>朋友圈分享</a>
56                   <ul class="thr-class">
57                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-task"></i>报表分享</a></li>
58                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图片分享</a></li>
59                   </ul>
60                 </li>
61               </ul>
62             </li>
63             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图库</a>
64               <ul class="sec-class">
65                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-computer"></i>本机</a>
66                   <ul class="thr-class">
67                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-camera"></i>相机照片</a></li>
68                   </ul>
69                 </li>
70               </ul>
71             </li>
72             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-dynamic"></i>成长记录</a>
73               <ul class="sec-class">
74                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-barrage"></i>历史记录</a>
75                 </li>
76                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-createtask"></i>任务记录</a>
77                 </li>
78               </ul>
79             </li>
80             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-coupons"></i>账户信息</a>
81               <ul class="sec-class">
82                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-workbench"></i>客户端信息</a>
83                   <ul class="thr-class">
84                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-editor"></i>修改信息</a></li>
85                   </ul>
86                 </li>
87               </ul>
88             </li>
89           </ul>
90         </div>
View Code

 css

样式上：通过一个cur类名，来控制后期的所有选中的效果，

 1 .sidebar-list {
 2   margin: 0 45px;
 3 }
 4 
 5 .sidebar-list a {
 6   font-size: 16px;
 7   color: #6e8095;
 8   font-family: "黑体";
 9 }
10 
11 .sidebar-list a:hover {
12   color: #fff;
13 }
14 
15 .sidebar-list .icon {
16   margin-right: 5px;
17 }
18 
19 .sidebar-list .sec-class-li {
20   position: relative;
21 }
22 
23 .sidebar-list .sec-class-li:after {
24   content: "";
25   position: absolute;
26   z-index: 10;
27 }
28 
29 .sidebar-list .sec-class-li:after {
30   top: 21px;
31   left: 0;
32   width: 6px;
33   height: 6px;
34   overflow: hidden;
35   border-right: 1px solid #6e8095;
36   border-bottom: 1px solid #6e8095;
37   -webkit-transform: rotate(-45deg);
38   -moz-transform: rotate(-45deg);
39   -ms-transform: rotate(-45deg);
40   transform: rotate(-45deg);
41   -webkit-transition: transform 0.5s;
42   -moz-transition: transform 0.5s;
43   -ms-transition: transform 0.5s;
44   transition: transform 0.5s;
45 }
46 
47 .sidebar-list .sec-class-li.cur:after {
48   top: 19px;
49   border-right: 1px solid #fff;
50   border-bottom: 1px solid #fff;
51   -webkit-transform: rotate(45deg);
52   -moz-transform: rotate(45deg);
53   -ms-transform: rotate(45deg);
54   transform: rotate(45deg);
55   -webkit-transition: transform 0.5s;
56   -moz-transition: transform 0.5s;
57   -ms-transition: transform 0.5s;
58   transition: transform 0.5s;
59 }
60 
61 .cur > a {
62   color: #fff;
63 }
64 
65 .red > a {
66   color: red;
67 }
68 
69 .first-class li {
70   padding-top: 15px;
71 }
72 
73 .sec-class, .thr-class {
74   display: none;
75   margin-left: 22px;
76   font-size: 14px;
77 }
78 
79 .sec-class > li {
80   padding-left: 12px;
81 }
82 
83 .sec-class > li:hover {
84   color: #fff;
85 }
View Code

 

js

逻辑上：这次遇到用 “is()” 函数判断列表是否展开，但是未知原因不起效果，所以用了content.clientHeight来通过高度是否已经展开

 1 $(function(){
 2     $(".first-class>li").click(function(e){
 3         var $index = $(this).index();
 4         var $height = $(this).context.clientHeight;
 5          e = window.event || e;
 6        e.stopPropagation();
 7         if($height > 34){
 8             $(this).removeClass("cur");
 9             $(this).children(".sec-class").slideUp("fast");
10             $(this).children(".sec-class").children("li").children(".thr-class").slideUp("fast");
11             $(this).children(".sec-class").children("li").removeClass("cur");
12         }else{
13             $(this).addClass("cur").siblings("li").removeClass("cur");
14             $(this).children(".sec-class").slideDown("fast");
15             $(this).siblings("li").children(".sec-class").slideUp("fast");
16             $(this).siblings("li").children(".sec-class").children("li").children(".thr-class").slideUp("fast");
17             $(this).siblings("li").children(".sec-class").children("li").removeClass("cur");
18         }
19     });
20     $(".sec-class>li").click(function(e){
21          e = window.event || e;
22        e.stopPropagation();
23         var $index = $(this).index();
24         var $height = $(this).context.clientHeight;
25         if($height > 34){
26             $(this).children(".thr-class").slideUp("fast");
27             $(this).removeClass("cur");
28             $(this).children(".thr-class").children("li").removeClass("cur");
29         }else{
30             $(this).addClass("cur").siblings("li").removeClass("cur");
31             $(this).children(".thr-class").slideDown("fast");
32             $(this).siblings("li").children(".thr-class").slideUp("fast");
33             $(this).siblings("li").children(".thr-class").children("li").removeClass("cur");
34         }
35     });
36     $(".thr-class>li").click(function(e){
37          e = window.event || e;
38        e.stopPropagation()
39         $(this).addClass("cur").siblings("li").removeClass("cur");
40         var question = confirm("你确定要跳转新页面吗","跳转成功");
41         if(question){
42             alert("恭喜答对了！")
43         }else{
44             alert("很遗憾，链接无效！")
45         }
46     })
47 
48 })
View Code

 js懒得整理了。。。

 

 

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

posted @ 2017-09-19 16:45  xing.org1^  阅读(1346)  评论(0)  编辑  收藏  举报