效果图:
本次制作要点:
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/