Jquery學習插件之手風琴

時間 2019-11-08

原文原文鏈接

<!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部分css

/**
 * 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部分html

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