基于jQuery开发的手风琴插件 jquery.accordion.js

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、展示效果：

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