代码改变世界

js收缩菜单

2016-06-17 09:15  冰羽幻灵  阅读(603)  评论(0)  编辑  收藏  举报

效果图：

css代码：

 1 ul{
 2     padding:0;
 3     font-family:Microsoft Yahei;
 4 }
 5 ul li{
 6     list-style-type:none;
 7 }
 8 .new-menu{
 9     margin-top: 0px;
10     margin-bottom:0px;
11 }
12 .new-menu>li{
13     margin-bottom:2px;
14 }
15 .group-title{
16     height:35px;
17     line-height:35px;
18     width:100%;
19     font-size:14px;
20     padding-left:10px;
21     background:#F3F5F9;
22     color:#333;
23     cursor:pointer;
24 }
25 .title-minus{
26     background:url("../../images/leftmenu/minus.png") no-repeat!important;
27 }
28 .title-plus{
29     background:url("../../images/leftmenu/plus.png") no-repeat!important;
30 }
31 .title-name{
32     margin-left:10px;
33 }
34 .title-mark{
35     float:right;
36     height:19px;
37     margin-top:7px;
38     line-height:35px;
39     margin-right:10px;
40     color:#D1D3DA;
41     width: 21px;
42 }
43 .collapse>li{
44     color:#666;
45     height:35px;
46     line-height:35px;
47     font-family:Microsoft Yahei;
48     font-size:14px;
49     cursor:pointer;
50     text-align:left;
51     border-bottom:solid 1px #f8f8f8;
52     padding-left:35px;
53 }
54 .collapse>li:hover{
55     color:#3a7dd2;
56 }
57 .collapse-active{
58     background:#3a7dd2;
59     color:#fff !important;
60 }

js代码：

 1 $(function(){
 2     leftMenu.hideEvent();
 3     leftMenu.bindEvent();
 4 });
 5 
 6 /**
 7  * 左边目录栏操作
 8  */
 9 var leftMenu={
10         /**
11          * 初始化隐藏
12          */
13         hideEvent : function(){
14             $(".collapse").css("display","block");
15             $("#first").nextAll().find("ul").css("display","none");
16         },
17         bindEvent : function(){
18             /**
19              * 主菜单的点击事件
20              */
21             $(".group-title").on("click", function() {
22                 /*$(this).parent().find("ul").slideToggle(300,function(){
23                     if($(this).css("display") == "none"){
24                         $(this).prev().find("#mark").attr("class","fa fa-plus title-mark");
25                     }else{
26                         $(this).prev().find("#mark").attr("class","fa fa-minus title-mark");
27                     }
28                 });*/
29                 if($(this).parent().find("ul").css("display") == "none"){
30                     $(this).parent().find("ul").slideDown("fast");
31                     $(this).find("#mark").attr("class","title-minus title-mark");
32                     $(this).parent().siblings().find("ul").slideUp("fast");
33                     $(this).parent().siblings().find("#mark").attr("class","title-plus title-mark");
34                 }else{
35                     $(this).parent().find("ul").slideUp("fast");
36                     $(this).parent().find("#mark").attr("class","title-plus title-mark");
37                 }
38             });
39 
40             /**
41              * 子菜单的点击事件
42              */
43             $(".collapse>li").on("click", function() {
44                 $(this).addClass("collapse-active");
45                 $(".collapse>li").not(this).removeClass("collapse-active");
46                 $($("iframe")[0]).attr("src", $(this).attr("data-href"));
47             });
48         }
49 }

使用范例：

 1 <ul class="new-menu">
 2  2     <li class="accordion-group" id="first">
 3  3         <div class="group-title"><i class="fa fa-database"></i><b class="title-name">一级菜单A</b><span id="mark" class="title-minus title-mark"></span></div>
 4  4             <ul class="collapse">
 5  5                 <li class="collapse-active" data-href="">
 6  6                     二级菜单A
 7  7                 </li>
 8  8                 <li data-href="">
 9  9                     二级菜单B
10 10                 </li>
11 11             </ul>
12 12     </li>
13 13     <li class="accordion-group">
14 14         <div class="group-title"><i class="fa fa-cog"></i><b class="title-name">一级菜单B</b><span id="mark" class="title-plus title-mark"></span></div>
15 15             <ul class="collapse">
16 16                 <li data-href="">
17 17                     二级菜单C
18 18                 </li>
19 19                 <li data-href="">
20 20                     二级菜单D
21 21                 </li>
22 22                         
23 23             </ul>
24 24     </li>
25 25 </ul>

 所需图标：