Jquery学习插件之手风琴

浏览数：22 / 时间：2015年06月09日

<!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>

View Code

js部分

/**
 * Created by Iecy on 14-9-5.
 * 手风琴插件
 */
;(function($){
    $.fn.extend({
        accordion:function(options){
            var defaults = {
                width:"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);

View Code

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