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. MYSQL更改root password时遇到Access Denied的解决办法

    今天在公司虚拟机上装MYSQL之后需要修改root password,然而遇到这样的错误: Access denied for user 'root'@'localhost' (using passw ...

  2. Scrapyd部署爬虫

    Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...

  3. 遍历Map和List的几种方法和性能比较

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  4. mysql 左连接 右连接 内链接

    一般所说的左连接,右连接是指左外连接,右外连接.做个简单的测试你看吧.先说左外连接和右外连接:[TEST1@orcl#16-12月-11] SQL>select * from t1;ID NAM ...

  5. Python的迭代器与生成器

    Python中的生成器和迭代器方便好用,但是平时对生成器和迭代器的特性掌握的不是很到位,今天将这方面的知识整理一下. 迭代器 为了更好的理解迭代器和生成,我们需要简单的回顾一下迭代器协议的概念. 迭代 ...

  6. Kotlin入门第四课：简单工厂模式

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  7. keyStore很重要，千万不能丢失

    打包apk的时候需要对apk文件进行签名,如果想要自己给apk签名那么就要自己创建keystore.1.签名的意义为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package N ...

  8. 经验之谈——gulp使用教程

    gulp的最实用教程 使用gulp编译less.sass.压缩js等常用功能讲解 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多 ...

  9. AugularJS从入门到实践（一）

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...

  10. Japanese Learning - 五十音图

    平假名: 片假名: あ い う え お ア イ ウ エ オ か き く け こ カ キ ク ケ コ さ し す せ そ サ シ ス セ ソ た ち つ て と        タ チ ツ テ ト な に ...