<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手风琴</title> <link href="css/accordion.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/accordion.js"></script> <script> $(function(){ //插件的应用 $("#ul1").accordion(); }); </script> </head> <body> <ul id="ul1"> <li>111111111<span>第一块</span></li> <li>22222222222<span>第二块</span></li> <li>33333333333<span>第三块</span></li> <li>444444444<span>第四块</span></li> <li>555555555<span>第五块</span></li> </ul> </body> </html>
js部分
/** * Created by Iecy on 14-9-5. * 手风琴插件 */ ;(function($){ $.fn.extend({ accordion:function(options){ var defaults = { "800px", spanWidth:20, hideWidth:700 }; var options = $.extend(defaults,options); var obj = $(this); //当前对象 var obj_children = obj.children();//当前对象下的子级（第一级） var obj_childern_len = obj_children.length;//子级的个数 var aLeft = []; obj_children.each(function(){ var index = $(this).index(); $(this).css({zIndex:obj_childern_len-index,left:options.spanWidth*index+"px"});//初始化各个li层级和位置 aLeft[index] = $(this).position().left;//保存下各个手风琴键的位置 }); obj_children.mouseover(function(){ var index = $(this).index(); obj_children.each(function(){ if($(this).index()<index){ obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]-options.hideWidth+"px"}); }else{ obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]+'px'}); } }); }); } }); })(jQuery);
css部分
* {margin:0; padding:0; list-style:none;} /*展开：720px 收起：20px*/ #ul1 {width:800px; height:400px; border:1px solid red; margin:10px auto; position:relative; overflow:hidden;} #ul1 li {width:720px; height:400px; background:#CCC; position:absolute;} #ul1 li span {position:absolute; top:0; right:0; background:#C66; width:18px; height:398px; border:1px solid black; color:white; text-align:center;}
个人练习，路过下就可以了。