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. scrapy中的下载器中间件

    scrapy中的下载器中间件 下载中间件 下载器中间件是介于Scrapy的request/response处理的钩子框架. 是用于全局修改Scrapy request和response的一个轻量.底层 ...

  2. scrapy初试

    scrapy初试 创建项目 打开cmd,在终端输入scrapy startproject tutorial,这里将在指定的文件夹下创建一个scrapy工程 其中将会创建以下的文件: scrapy.cf ...

  3. js验证是否是数字，支持正负数小数

    js验证是否是数字,支持正负数小数. function isShuzi(str){ //var regExp =/[0-9]$/;//不支持小数 var regExp =/^\-?[0-9]+(.[0 ...

  4. 高效率遍历Map以及在循环过程中移除 remove指定key

    //高效率遍历Map以及在循环过程中移除 remove指定key //使用iter循环的时候 可以在循环中移除key,for在循环的过程中移除会报错哦 //本方法效率高 Iterator iter = ...

  5. yiic执行出现不是内部或外部命令的解决办法

    右击我的电脑-->属性-->高级系统设置-->高级-->环境变量-->系统变量 设置为"D:\Program Files (x86)\wamp\bin\php\ ...

  6. 在jupyter notebook中同时安装python2和python3

    之前讨论过在anaconda下安装多个python版本,本期来讨论下,jupyter notebook中怎样同时安装python2.7 和python3.x. 由于我之前使用的jupyter note ...

  7. maven自定义jar到本地仓库

    Apache Maven为项目构建提供了绝佳的解决方案,其本地仓库中缓存了远程代理仓库或中央仓库中的资源,从而提高网络资源使用效率,很好很强大!  但是并非所有资源都可以根据GroupId.Artif ...

  8. HTML form表单小结

    HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉.在小结的最后有一个form表单的小例子,可以作为参考. -----DanlV form是HTML的一个极为重 ...

  9. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

  10. 父(Spring)子(SpringMVC)容器之初解篇

    Spring和SpringMVC作为Bean管理容器和MVC层的默认框架,已被众多WEB应用采用,而在实际开发中,由于有了强大的注解功能,很多基于XML的配置方式已经被替代,但在实际项目中,我们经常会 ...