<!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. 微信JS-SDK 接口调用与 php 遇到的坑

    问题:config:invalid signature一直爆这个错误 解决: 看我把这些坑都总结了一下:要命的invalid signature. https://segmentfault.com/q ...

  2. 添加多盟SDK 库函数

  3. Android开源框架之SwipeListView导入及模拟QQ侧滑

    SwipeListView是Github上的一个开源框架,地址:https://github.com/47deg/android-swipelistview SwipeListView was bor ...

  4. DataTables在回调方法中使用api

    $(document).ready(function() { $('#example').dataTable( { "initComplete": function () { va ...

  5. 树莓派 wheezy安装与远程登录配置

    一.准备工作 1:wheezy系统镜像 2:Win32DiskImager-0.9.5-install 3:SDFormatter 4:SD卡 我用的是8G 二.安装系统 流程:SDFormatter ...

  6. EBS R12 查询EBS用户相关SQL

    --R12查询EBS在线用户SQL  SELECT U.USER_NAME,        APP.APPLICATION_SHORT_NAME,        FAT.APPLICATION_NAM ...

  7. 认识什么是SEO

    何为SEO? SEO是由英 文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”,是指在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网 ...

  8. Hive 10、Hive的UDF、UDAF、UDTF

    Hive自定义函数包括三种UDF.UDAF.UDTF UDF(User-Defined-Function) 一进一出 UDAF(User- Defined Aggregation Funcation) ...

  9. python高级编程之选择好名称:命名指南

    # # -*- coding: utf-8 -*- # # python:2.x # __author__ = 'Administrator' #命名指南 #一组常用的命名规则可以被应用到变量,方法函 ...

  10. Windows下PHP开发环境搭建

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...