(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. JAVA Socket连接服务器时可能抛出的异常

    1.UnknownHostException:host(非ip)无法识,就会报该异常,www.google.com.hk这个虽然也ping不通,但是不会报该错,因为他是一个确实存在的域名.他会报Con ...

  2. Import MySQL Dumpfile, SQL Datafile Into My Database

    How can I import a MySQL dumpfile into my database? I'm using CentOS Linux 5 server. My old hosting ...

  3. HTML——CSS样式表&布局页面

    CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...

  4. 使用ADO.net中的链接字符串

    需要引用:System.Configuration命名空间 ConfigurationManager.ConnectionStrings["sqlConnStr"].Connect ...

  5. mysql 批量更新

    bs_user 表,我们叫他 bu表, 字段user_id,len_id, think_wellUser 表,我们简称为tw表,中的user_id ,len_id 其中tw表的user_id 是bu表 ...

  6. javascript获取元素结点到页面的绝对距离的方式

    var div = document.getElementById('div');var p = getPos(div); function getPos(obj) { var pos = {left ...

  7. Django后台管理界面

    之前的几篇记录了模板视图.模型等页面展示的相关内容,这篇主要写一下后台admin管理界面的内容. 激活管理界面 Django管理站点完全是可选择的,之前我们是把这些功能给屏蔽掉了.记得上篇中Djang ...

  8. rhel6.4 配置本地yum的源

    1 创建rhel-debuginfo.repo,如果有则先备份再删除       cd  /etc/yum.repos.d    rm  rhel-debuginfo.repo    vi  rhel ...

  9. 行变列 拼接字符串 MSSQL 一个超级搞的问题

    由数据 ThreeLevelSortID KeyWordID KeyWordName key1 key2 key3 key4 得到数据大 ThreeLevelSortID KeyWordName ke ...

  10. SMO要点总结

    SMO要点总结: SMO使用坐标上升的方法,求解SVM的最优解.和原始坐标上升方法的不同点在于: 1.       由于SVM的限制条件 ,所以不能只使用一个坐标,改为更新两个 2.       采用 ...