手风琴菜单栏 插件

需要文件jquery.accordion.css和jquery.accordion.js。

jquery.accordion.css：

 1 .accordion h5 {
 2     height: 35px;
 3     line-height: 35px;
 4     margin: -1px 15px 0;
 5     border-bottom: 1px solid #D9D9D9;
 6     text-indent: 10px;
 7     color: #333;
 8     cursor: pointer;
 9     font-weight:bold;
10     -moz-user-select:none;
11 }
12 .accordion h5.active_h5{
13     color:#70ABD5;
14 }
15 .accordion ul{
16     list-style:none;
17     display:none;
18     margin: -1px 15px 0;
19     border-bottom: 1px solid #D9D9D9;
20 }
21 .accordion ul.menu_last{
22     border-bottom-width:0;
23 }
24 .accordion ul li{
25     padding-left:24px;
26 }
27 .accordion li.sub_li{
28     padding-left:0;
29 }
30 .accordion ul li a{
31     display:block;
32     text-decoration:none;
33     font-size:12px;
34     color:#333;
35     height:30px;
36     line-height:30px;
37     margin-left:-1px;
38 }
39
40 .accordion .arrow_right,.accordion .arrow_down{
41     position:relative;
42     display:inline-block;
43     height:0;
44     width:0;
45     font-size:1px;
46     line-height:0;
47     border-color:transparent transparent transparent #aaa;
48     border-style:dashed dashed dashed solid;
49     border-width:6px;
50     top:1px;
51 }
52 .accordion .arrow_down{
53     border-color:#aaa transparent transparent transparent;
54     border-style:solid dashed dashed dashed;
55     top:2px;
56     left:-4px;
57 }

jquery.accordion.js:

 1 $.fn.accordion=function(){
 2     var container=this;
 3     var h5Title=$(container).find(‘h5‘);
 4
 5     //给所有标题添加箭头
 6     $(‘<span class="arrow_right"></span>‘).prependTo(h5Title);
 7
 8     //禁止双击选中文字 IE/CHROME
 9     h5Title.bind(‘selectstart‘,function(){return false;});
10
11     h5Title.each(function(index){
12         $(this).click(function(){
13             var n=index;
14             var clickSubH5=$(this).hasClass(‘sub_h5‘);
15
16             //除了当前标题(子标题另外处理)，其余全部标题隐藏起来、样式改变
17             h5Title.filter(function(idx){
18                 //点击子标题时，父标题不需要操作
19                 if(clickSubH5&&(idx=n-1)){
20                         return false;
21                 }
22                 return idx!=n;
23             }).removeClass(‘active_h5‘)
24               .find(‘span‘).removeClass(‘arrow_down‘)
25               .parent().siblings(‘ul‘).slideUp();
26
27             //点击标题时，改变标题样式、改变箭头方向、设置动画
28             $(this).addClass(‘active_h5‘)
29                    .find(‘span‘).toggleClass(‘arrow_down‘)
30                    .parent().siblings(‘ul‘).stop(true,true).slideToggle(); //防止连续多次点击，一直产生动画。
31
32         });
33     });
34 };

HTML结构：

 1 <div class="accordion">
 2        <div>
 3             <h5>驾校管理</h5>
 4             <ul>
 5                 <li><a href="#">添加驾校</a></li>
 6                 <li><a href="#">驾校管理</a></li>
 7             </ul>
 8         </div>
 9         <div>
10             <h5>账号管理</h5>
11             <ul>
12                 <li><a href="#">添加账号</a></li>
13                 <li><a href="#">账号管理</a></li>
14             </ul>
15         </div>
16         <div>
17             <h5>公众号管理</h5>
18             <ul class="menu_last">
19                 <li><a href="#">菜单管理</a></li>
20                 <li><a href="#">欢迎消息</a></li>
21                 <li class="sub_li">
22                     <div>
23                         <h5 class="sub_h5">文章管理</h5>
24                         <ul class="menu_last">
25                             <li><a href="#">发表文章</a></li>
26                             <li><a href="#">文章管理</a></li>
27                         </ul>
28                     </div>
29                 </li>
30             </ul>
31         </div>
32 </div>

使用方法：

1 $(function(){
2      $(‘.accordion‘).accordion();
3  });

效果图：