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 }

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

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