<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<style>

* {margin:0;padding:0;}

.accordion {width:500px;height:auto;border:solid 1px #ccc;}

.accordion dt {padding:10px;border-bottom:solid 1px #ccc;font:bold 14px/16px 微软雅黑;color:#444;background:#eee;}

.accordion dd {padding:8px 10px;font:12px/16px 微软雅黑;color:#999;border-bottom:solid 1px #ccc;}

</style>

</head>

<body>

<dl class="accordion" id="my">

      <dt>方法合并 1</dt>

        <dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>

      <dt>方法合并 2</dt>

        <dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>

      <dt>方法合并 3</dt>

        <dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>

      <dt>方法合并 4</dt>

        <dd>jQuery 的 $.extend 方法合并两个或多个对象</dd>

</dl>

<script>

    (function($){

        $.fn.accordion = function(options){

            return this.each(function(){

                var dts = $(this).children('dt');

                dts.click(onClick);

                dts.each(reseter);

            });

            function onClick () {

                $(this).siblings('dt').each(hide);

                $(this).next().slideDown("fast");

                return false;

            }

            function hide (){

                $(this).next().slideUp("fast");

            }

            function reseter(){

                $(this).next().hide();

            }

        };

    })(jQuery);

    $('#my').accordion();

</script>

</body>

</html>

方法合并 1
jQuery 的 $.extend 方法合并两个或多个对象
方法合并 2
jQuery 的 $.extend 方法合并两个或多个对象
方法合并 3
jQuery 的 $.extend 方法合并两个或多个对象
方法合并 4
jQuery 的 $.extend 方法合并两个或多个对象

学了一个封装的jquery插件，感觉还成的更多相关文章

  1. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  2. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  3. 制作一个简洁的jquery插件

    原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6ef ...

  4. 封装第三方jquery插件

    需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件.因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中.例如我们用得比较多的 j ...

  5. How to Create a Basic Plugin 如何写一个基础的jQuery插件

    How to Create a Basic Plugin Sometimes you want to make a piece of functionality available throughou ...

  6. 【前端】制作一个handlebars的jQuery插件

    (function($) { var compiled = {}; $.fn.handlebars = function($srcNode, data) { // 取出模版内容 var src = $ ...

  7. 图片延迟加载并等比缩放，一个简单的JQuery插件

    使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){ $.fn.zoom = function(s ...

  8. 一个不错的jquery插件模版

    pageplugin.js (function ($) { $.PagePlugin = function (obj, opt) { var options = $.extend({}, $.Page ...

  9. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

随机推荐

  1. iscroll-lite.js源码注释

    /*! iScroll v5.1.2 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */ (function (window, ...

  2. Struts2中的get、set方法作用：

    Struts2中的get.set方法作用: 在Struts2中,客户端和服务器之间的数据传输全部要用到get.set方法:用set方法 ,可以将表单中的值存入Action类.通过Struts2.0标签 ...

  3. Pyhon之常用操作符 - 零基础入门学习Python006

    Pyhon之常用操作符 让编程改变世界 Change the world by program 今天我们来谈谈Python之常用操作符,在此之前的一些例子中,大家已经看到Python可以完成简单的算术 ...

  4. VLSI和ASIC的区别（转）

    VLSI和ASIC是不同的两个概念 VLSI(Very Large Scale Integrate circuit)是指集成电路的规模,有时也指制造集成电路所使用的工艺,VLSI工艺一般都在1um以下 ...

  5. Android处理XML的三种方式

    http://www.cnblogs.com/zhangdongzi/archive/2011/04/14/2016434.html http://blog.csdn.net/zzp16/articl ...

  6. c++ 08

    一.程序的错误 1.编码错误:编译阶段 2.设计错误:测试阶段 3.环境错误:使用阶段 4.应用错误:测试和使用阶段 二.错误处理机制 1.通过返回值处理错误 当一个函数在执行过程中发生了某种错误,通 ...

  7. 关于padding

    例子 1 padding:10px 5px 15px 20px; 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 例子 2 padding:10px 5px 15 ...

  8. 【iOS开发-66】QQ设置界面的案例：利用storyboard开发静态的tableView界面，核心是Static Cells

    (1)效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Vpc3ViYW8=/font/5a6L5L2T/fontsize/400/fill/I0JB ...

  9. .NET(C#)：分析IL中的if-else，while和for语句并用Emit实现

    这是一篇关于IL和反射Emit的文章(所以不喜欢IL或者Emit的就没必要往下看了),要求读者对IL和Emit工作原理较了解.所有分析IL均在Visual Studio 2010 SP1下编译生成.( ...

  10. table-cell完成左侧定宽，右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...