破碎的多层JQuery手风琴

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. 只有一个＆＃39;类别＆＃39;一次扩大
2. 只有一只子猫？内部要一次扩展
3. 添加/删除＆＃39; Active＆＃39;类。

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. 告诉脚本这是您的手风琴$('.SideNav').accordion();

Answer 2

http://jsfiddle.net/sabithpocker/5rkrq4bw/2/

$('.SideNav .Menu a.MenuDrop').click(function(event){
    event.preventDefault();
    console.log(this);
    var subMenuToExpand = $('ul.sub-menu', $(this).parent());
    var otherVisibleSubMenu = $('ul.sub-menu:visible', $(this).parents('.Menu'));
    otherVisibleSubMenu.hide();
    subMenuToExpand.show();
});

---

$('.SideNav .Menu a.MenuDrop').click(function(event){
    $('ul.sub-menu:visible', $(this).parents('.Menu')).slideUp(50);
    $('ul.sub-menu', $(this).parent()).slideDown();
});