(function(){
$.fn.YAccordion=function(options){ var settings={
trigger:'click',
speed:300,
}; if(options)
$.extend(settings,options); return this.each(function(){
$("p",this).bind(settings.trigger,function(){
$(this).next("ul").slideToggle(settings.speed).siblings("ul").hide();
});
$("ul",this).hide().first().show();
});
}
})();
 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN"/>
<script type="text/javascript">
</script>
<style type="text/css">
p{cursor:pointer;}
</style>
</head>
<body>
<div class="accordion">
<p>第一栏</p>
<ul>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
</ul>
<p>第二栏</p>
<ul>
<li>bbbbbbbbb</li>
<li>bbbbbbbbb</li>
<li>bbbbbbbbb</li>
</ul>
<p>第三栏</p>
<ul>
<li>ccccccccc</li>
<li>ccccccccc</li>
<li>ccccccccc</li>
</ul>
</div>
<script src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery.yaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
$(".accordion").YAccordion({speed:100});
</script>
</body>
</html>

jquery插件anccordion的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  3. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  4. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

随机推荐

  1. HTTP请求的基本概念 HTTP请求头和响应头的含义

    1,HTTP请求的基本概念    TCP/UPD/HTTP    *2,HTTP请求头和响应头的含义  请求头:  Accept: text/html,image/*(浏览器可以接收的类型)  Acc ...

  2. VS2010中查询替换使用

    MSDN:http://msdn.microsoft.com/zh-cn/library/afy96z92.aspx 例子:

  3. C++<algorithm>中sort的比较函数写法(转)

    转自:http://www.wl566.com/biancheng/98907.html C++<algorithm>中sort的比较函数写法,有需要的朋友可以参考下. 定义排序函数: 方 ...

  4. 在Windows的Wamp环境下安装Composer

    注意: PHP缺少openssl扩展. 你可能会去屏幕右下角的Wamp的控制台,去加载php的openssl扩展,或者在php.ini中去掉 extension=php_openssl.dll 这一行 ...

  5. php中__autoload()方法详解

    [导读] PHP在魔术函数__autoload()方法出现以前,如果你要在一个程序文件中实例化100个对象,那么你必须用include或者require包含进来100个类文件,或者你把这100个类定义 ...

  6. linux命令——scp

    scp linux系统之间基于ssh登录的安全copy文件或者目录.本地[local]—— 远程[remote]{文件} scp local_file remote_username@remote_i ...

  7. LED发光二极管

    半导体发光器件包括半导体发光二极管(简称LED).数码管.符号管.米字管及点阵式显示屏(简称矩阵管)等.事实上,数码管.符号管.米字管及矩阵管中的每个发光单元都是一个发光二极管. 一. 半导体发光二极 ...

  8. Invalidate(TRUE)与Invalidate(FALSE)区别(前者会发送WM_ERASEBKGND消息全部刷新,然后使用WM_PAINT消息绘制,而后者只发送WM_PAINT消息)

    使用Invalidate(TRUE)函数时,它会向消息队列中添加了WM_ERASEBKGND和WM_PAINT两个消息. 使用Invalidate(FALSE)函数时,它只会向消息队列中添加了WM_P ...

  9. java中读取程序运行时间

    第一种是以毫秒为单位计算的. Java代码 //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  // ...

  10. Linux学习笔记4-三种不同类型的软件的安装(绿色软件、rpm软件、源代码软件)

    在Linux下软件分三种: 1.绿色软件:即不用安装直接就能用的软件 2.rpm安装包:以rpm结尾的可执行文件  3.源码文件:没有进行过编译和打包的文件,需要编译后再进行安装 一.绿色软件的安装 ...