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

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

css部分

 * {margin:; padding:; 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:; right:; background:#C66; width:18px; height:398px; border:1px solid black; color:white; text-align:center;}

个人练习，路过下就可以了。

Jquery学习插件之手风琴的更多相关文章

  1. Jquery 学习插件第一天

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  4. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  5. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  6. JQuery zoom插件学习

    jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...

  7. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

随机推荐

  1. android adb 命令详解

    ADB (Android Debug Bridge)  是android SDK中的工具,需要先配置环境变量才能使用.起调试桥的作用,可以管理安卓设备.(也叫debug工具) ---------查看设 ...

  2. studing（来自转载）

    1.getchar(): http://www.cnblogs.com/jiangjun/archive/2012/05/16/2503676.html 2.gets()和scanf( ): http ...

  3. 【Django】--Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 例子: 1.创建Form类 from djan ...

  4. react开发环境搭建

    ---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...

  5. Java异常处理机构（日常笔记）

    try{ 需要保护的代码块 }catch(异常类型 实例){ 捕捉到异常时的代码处理块 }[可有0~多个catch语句] finaly{ 不管异常是否发生都要执行的代码块}

  6. ES6扫盲

    原文阅读请点击此处 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: R ...

  7. pem转换成der

    openssl x509 -in xxxxx.pem -inform PEM -out xxxx.der -outform DER [root@NB Desktop]# file xxxx.der

  8. 基于EasyUI Treegrid的权限管理资源列表

    1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...

  9. 行为型模式之Observer模式

    观察者模式(又被称为发布-订阅模式.模型-视图模式.源-收听者模式或从属者模式) 观察者模式中,一个目标对象管理所有依赖于它的观察者对象,并且在它本身的状态改变时主动发出通知. 应用场景 拍卖会可以认 ...

  10. AVAssetReader+AVAssetReaderTrackOutput播放视频

    该文章引用自:http://www.jianshu.com/p/3d5ccbde0de1 IOS 微信聊天发送小视频的秘密(AVAssetReader+AVAssetReaderTrackOutput ...