javascript - 损坏的多层 JQuery Accordion

Question

JSFiddle

http://jsfiddle.net/5rkrq4bw/ 强文字

<小时/>

JQuery 代码

// Side Menu Starts
$('.SideNav .Menu a.MenuDrop').click(function(event){
    event.preventDefault();
    if(!$(this).hasClass('Active')) {
        if(!$(this).parent().parent().hasClass('Active') && $(this).next().hasClass('sub-menu')) {
            $(this).next().slideToggle();
            $(this).addClass('Active');
        } else {
            $('.SideNav .Menu li ul').slideUp();
            $(this).next().slideToggle();
            $('.SideNav .Menu a.MenuDrop').removeClass('Active');
            $(this).addClass('Active');
        }
    }
});
//Side Menu Ends

<小时/>

问题

尝试集成多个层时，我发现了一个问题，即一次只能打开一个层，并检查是否有其他层打开以关闭它们。

应该发生什么

演示

• 类别
  • 子猫
    • 链接
    • 链接
    • 链接
  • 子猫
    • 链接
    • 链接
    • 链接
• 类别
  • 子猫
    • 链接
    • 链接
    • 链接
  • 子猫
    • 链接
    • 链接
    • 链接

说明

1. 一次只能展开一个“类别”
2. 一次只能扩展一个“子目录”
3. 添加/删除“Active”类。

Answer 1

已解决:http://jsfiddle.net/wo4sj4pt/

JQuery 代码:

(function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = $('.Active');

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    if (!effect) {
                      $(el)
                       .toggleClass('active')
                       .parent('li')
                       .siblings()
                       .find('a')
                       .removeClass('active')
                       .parent('li')
                       .children('ul, div')
                       .slideUp('fast');
                    }
                  $(el)
                  .siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
                }
            });
        } 
    }); 
})(jQuery);

用法:

1. 链接到 JQuery 和上述脚本
2. 制作多级列表
3. 为您的列表指定类/ID 名称，例如“.SideNav”
4. 告诉脚本这是您的 Accordion $('.SideNav').accordion();