jquery插件anccordion
(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的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
随机推荐
- HTTP请求的基本概念 HTTP请求头和响应头的含义
1,HTTP请求的基本概念 TCP/UPD/HTTP *2,HTTP请求头和响应头的含义 请求头: Accept: text/html,image/*(浏览器可以接收的类型) Acc ...
- VS2010中查询替换使用
MSDN:http://msdn.microsoft.com/zh-cn/library/afy96z92.aspx 例子:
- C++<algorithm>中sort的比较函数写法(转)
转自:http://www.wl566.com/biancheng/98907.html C++<algorithm>中sort的比较函数写法,有需要的朋友可以参考下. 定义排序函数: 方 ...
- 在Windows的Wamp环境下安装Composer
注意: PHP缺少openssl扩展. 你可能会去屏幕右下角的Wamp的控制台,去加载php的openssl扩展,或者在php.ini中去掉 extension=php_openssl.dll 这一行 ...
- php中__autoload()方法详解
[导读] PHP在魔术函数__autoload()方法出现以前,如果你要在一个程序文件中实例化100个对象,那么你必须用include或者require包含进来100个类文件,或者你把这100个类定义 ...
- linux命令——scp
scp linux系统之间基于ssh登录的安全copy文件或者目录.本地[local]—— 远程[remote]{文件} scp local_file remote_username@remote_i ...
- LED发光二极管
半导体发光器件包括半导体发光二极管(简称LED).数码管.符号管.米字管及点阵式显示屏(简称矩阵管)等.事实上,数码管.符号管.米字管及矩阵管中的每个发光单元都是一个发光二极管. 一. 半导体发光二极 ...
- Invalidate(TRUE)与Invalidate(FALSE)区别(前者会发送WM_ERASEBKGND消息全部刷新,然后使用WM_PAINT消息绘制,而后者只发送WM_PAINT消息)
使用Invalidate(TRUE)函数时,它会向消息队列中添加了WM_ERASEBKGND和WM_PAINT两个消息. 使用Invalidate(FALSE)函数时,它只会向消息队列中添加了WM_P ...
- java中读取程序运行时间
第一种是以毫秒为单位计算的. Java代码 //伪代码 long startTime=System.currentTimeMillis(); //获取开始时间 doSomeThing(); // ...
- Linux学习笔记4-三种不同类型的软件的安装(绿色软件、rpm软件、源代码软件)
在Linux下软件分三种: 1.绿色软件:即不用安装直接就能用的软件 2.rpm安装包:以rpm结尾的可执行文件 3.源码文件:没有进行过编译和打包的文件,需要编译后再进行安装 一.绿色软件的安装 ...