<!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. Big Event in HDU（HDU 1171 多重背包）

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. Oracle asm介绍和安装linux+oracle10g+asm过程

    Oracle asm介绍和安装linux5.2+oracle10g+asm过程   1)ASM(自动存储管理)的来由:   ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出来 ...

  3. filter 以及 orderBy的使用

    filter用于关键字过滤操作,orderBy用于排序操作,运行界面如下: 点击标题Name与Email实现排序功能,输入框中输入关键字进行过滤,同时实现根据关键字进行过滤后进行排序操作: ng-re ...

  4. XJOI网上同步训练DAY1 T3

    思路:一开始看到这题的时候想DP,可是发现貌似不行..因为有前缀也有后缀,而且有的后缀会覆盖到现在的前缀,这就不满足无后效性了啊! 但是有个很巧妙的思路:如果我们知道a[i]的最大值,那么p的数量和q ...

  5. HDU 4405 Aeroplane chess（期望）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意:从0走到n,每次走之前掷一次筛子,掷出几点就向前走几点,走到大于等于n的地方就停止.但是, ...

  6. CRC校验源码分析

    这两天做项目,需要用到 CRC 校验.以前没搞过这东东,以为挺简单的.结果看看别人提供的汇编源程序,居然看不懂.花了两天时间研究了一下 CRC 校验,希望我写的这点东西能够帮助和我有同样困惑的朋友节省 ...

  7. 使用FastReport的UserDataSet时候，遇到TfrxMemoView内容过多而打印不全的问题

    解决方案很简单,就是把Memo所在的Band勾选Stretch就行了.另外还可勾选StartNewPage. 至于UserDataSet本身,猜测就是人为的构造一个类似数据库的集合,大致使用代码如下: ...

  8. OpenStack Mixture HypervisorsDriver configure and implementation theory

    通过本文,您将可以了解在 OpenStack 中如何进行混合 Hypervisor 的配置及其实现原理的基本分析.本文主要结合作者在 Nova 中的实际开发经验对 OpenStack 中混合 Hype ...

  9. The 4th tip of DB Query Analyzer

    The 4th tip of DB QueryAnalyzer Ma Genfeng (Guangdong Unitoll Services incorporated, Guangzhou 51030 ...

  10. pyqt显示指定范围的数字

    # -*- coding: cp936 -*- # -*- coding: cp936 -*- import sys from PyQt4 import QtCore, QtGui   #导入模块 a ...