1、插件代码
少说多做，基于jQuery的手风琴插件jquery.accordion.js的代码： 
/*

 * 手风琴插件说明：

 * 1、treeTrunk对应树干

 * 2、treeLeaf对应树叶，html代码结构一般为treeTrunk.next()元素

 * 3、treeTrunkActiveClass是树干展开后添加的样式

 * 4、treeType是触发手风琴效果的事件形式

 * 5、treeIs 加载后是否将第一个树干展开

 * 6、speed 展开、闭合动画执行时间

 * 7、插件命名为jquery.accordion.js

 */

;

(function($) {

    $.fn.accordion = function(options) {

        //插件默认值

        var defaultVal = {

            treeTrunk: 'a', //树干--点击需要展开的元素

            treeLeaf: 'ul', //树叶--点击展开元素后显示的内容

            treeTrunkActiveClass: 'active', //当前树干--当前展开树干元素的添加的样式

            treeType: 'click', //触发展开/关闭的事件类型：click,mouseenter,mouseleave,mouseout,mouseover

            treeIs: true, //页面加载后是否显示第一个树干的树叶内容

            speed:500//动画执行时间

        };

        var obj = $.extend(defaultVal, options); //合并参数

        return this.each(function() {

            var selObject = $(this); //获取触发手风琴事件对象

            var selTreeTrunk = selObject.find(obj.treeTrunk); //获取当前对象下的树干元素

            var selTreeLeaf = selTreeTrunk.next(obj.treeLeaf); //获取当前对象下的树干元素下的树叶

            //绑定事件

            selTreeTrunk.bind(obj.treeType, function() {

                //判断树叶是否显示

                if($(this).next(selTreeLeaf).is(':visible')) {

                    //关闭树叶

                    $(this).next(selTreeLeaf).slideUp(obj.speed);

                    //移除active样式

                    $(this).removeClass(obj.treeTrunkActiveClass);

                } else {

                    //所有树干移除移除active样式

                    selTreeTrunk.removeClass(obj.treeTrunkActiveClass);

                    //当前树干添加active样式

                    $(this).addClass(obj.treeTrunkActiveClass);

                    //所有树叶闭合

                    selTreeTrunk.next(selTreeLeaf).slideUp(obj.speed);

                    //当前树干下的树叶展开

                    $(this).next(selTreeLeaf).slideDown(obj.speed);

                }

            });

            //页面加载后触发第一个树干显示树叶内容

            if(obj.treeIs) {

                selTreeTrunk.eq(0).trigger(obj.treeType);

            }

        });

    }

})(jQuery);

 2、插件使用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>基于jQuery的手风琴插件</title>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

                list-style: none;

            }

            ul.sidebar-menu {

                width: 200px;

                padding: 10px;

            }

            ul.sidebar-menu>li>a {

                font-size: 16px;

                line-height: 20px;

                color: #000;

                text-decoration: none;

            }

            ul.sidebar-menu>li>a:hover,

            ul.sidebar-menu>li>a.active {

                background-color: #675C7C;

                color: white;

            }

            ul.sidebar-menu>li>ul {

                display: none;

            }

            ul.sidebar-menu>li>ul>li>a {

                display: inline-block;

                font-size: 14px;

                line-height: 18px;

                color: #000;

                text-decoration: none;

            }

        </style>

    </head>

    <body>

        <ul class="sidebar-menu">

            <li class="treeview">

                <a href="#">

                    标题1

                </a>

                <ul>

                    <li class="">

                        <a href="index.html">标题1-1</a>

                    </li>

                    <li>

                        <a href="index2.html">标题1-2</a>

                    </li>

                </ul>

            </li>

            <li class="treeview">

                <a href="#">

                    标题2

                </a>

                <ul>

                    <li class="">

                        <a href="index.html">标题2-1</a>

                    </li>

                    <li>

                        <a href="index2.html">标题2-2</a>

                    </li>

                </ul>

            </li>

        </ul>

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <script src="js/jquery.accordion.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                $('.sidebar-menu').accordion({

                    //获取树干元素

                    treeTrunk: '.treeview a'

                })

            })

        </script>

    </body>

</html>

说明：

（1）、jquery.accordion.js插件的路径要配置对。

（2）、可以自己编辑页面的展示样式，如active样式。

3、展示效果：

请直接运行上述代码查看插件效果。

 

基于jQuery开发的手风琴插件 jquery.accordion.js的更多相关文章

  1. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  2. jQuery 开发一个简易插件

    jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...

  3. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  4. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  5. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  6. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  7. jquery判断浏览器版本插件，jquery-browser.js

    jquery判断浏览器版本插件,jquery-browser.js,jquery 判断是否为ie浏览器插件 >>>>>>>>>>>&g ...

  8. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  9. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

随机推荐

  1. 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

      前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

  2. Kafka官方文档翻译——设计

    下面是博主的公众号,后续会发布和讨论一系列分布式消息队列相关的内容,欢迎关注. ------------------------------------------------------------ ...

  3. 【踩坑记录】记一次MySQL主从复制延迟的坑

    最近开发中遇到的一个MySQL主从延迟的坑,记录并总结,避免再次犯同样的错误. 情景 一个活动信息需要审批,审批之后才能生效.因为之后活动要编辑,编辑后也可能触发审批,审批中展示的是编辑前的活动内容, ...

  4. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  5. H5个性三级联动日期插件（一）

    1. 先看效果:如图 2.如果跟你的需求一样的话,那就抓紧down(当)起来吧! 首先你的页面可能需要很多的开发需求文件: jquery,mobiscroll 等js框架插件等 自己参照官方的demo ...

  6. 4.Smarty模板之间调用

    {include file="header.tpl" name="cai"}

  7. app 选项卡代码

    <div id="segmented" class="mui-segmented-control"> <a class="mui-c ...

  8. 如何在docker配置asp.net core https协议

    本文参考自<Step by step: Expose ASP.NET Core over HTTPS with Docker> 自从微软发布.net core以来,就在许多社区掀起了讨论, ...

  9. Wiser的Junit测试用法

    package org.jbpm.process.workitem.email; import static org.junit.Assert.assertEquals; import static ...

  10. Java电器商场小系统--简单的java逻辑

    //商场类public class Goods { int no; //编号 String name; //商品名称 double price; //商品价格 int number; //商品数量 / ...