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

效果图:

本次制作要点:

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>

 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 }

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 })

 js懒得整理了。。。

声明:

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

  博主:xing.org1^

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大

在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,label可提供相应的便利。

1161
来自专栏互联网杂技

新鲜出炉! Web开发人员必备资源

摘要:我们将会为Web开发人员提供多个资源。其中包括一个着陆页设计资源、两种降低屏幕刺眼程度的方法、一个用来实现拖曳网页布局的插件、一个用于整理date-pic...

3738
来自专栏腾讯大讲堂的专栏

使用Laya引擎开发微信小游戏

使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。

1.7K8
来自专栏Jerry的SAP技术分享

SAP成都研究院C4C光明左使:SAP Cloud for Customer 使用SAP UI5的独特之处

2017年7月,SAP成都研究院C4C开发团队刚刚建立。某个周一早晨的Scrum meeting,新出现一位眉清目秀的小伙子,向大家自我介绍:“大家好,我叫杨x...

1542
来自专栏Web项目聚集地

HTML5+Ajax实现音乐播放器

播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐。(这些API是饥人谷的老师整理的),音乐播放器美观如图:

8874
来自专栏糊一笑

模拟制作网易云音乐(AudioContext)

记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩。由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一...

4605
来自专栏贺贺的前端工程师之路

Angular2、Ionic、TypeScript、es6的关系?

其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,a...

1243
来自专栏星流全栈

2016 JavaScript 技术栈展望

1664
来自专栏儿童编程

儿童学编程,3分钟入门极简教程!

Scratch是一款由麻省理工学院(MIT)设计开发的少儿编程工具。使用者可以不认识英文单词,也可以不会使用键盘。就像搭积木一样把一块块积木形状的命令用鼠标拖拽...

8012
来自专栏iOS开发攻城狮的集散地

图片验证码

3148

扫码关注云+社区

领取腾讯云代金券