多层JQuery手风琴坏了

Question

JSFiddle

http://jsfiddle.net/5rkrq4bw/ strong text

---

JQuery Code

// 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

---

The Problem

Trying to integrate multiple tiers I am finding the problem of only being able to have one open at a time and checking to see if any others are open to close them.

What should happen

Demo

• Category
  • Sub-Cat
    • Link
    • Link
    • Link
  • Sub-Cat
    • Link
    • Link
    • Link
• Category
  • Sub-Cat
    • Link
    • Link
    • Link
  • Sub-Cat
    • Link
    • Link
    • Link

Explanation

1. Only one 'Category' to be expanded at a time
2. Only one 'Sub-Cat' inside to be expanded at a time
3. Adding / removing of 'Active' class.

Answer 1

Resolved: http://jsfiddle.net/wo4sj4pt/

JQuery Code:

(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);

Usage:

1. Link to JQuery and the above script
2. Make a multi-level list
3. Give your list a class/ID name such as '.SideNav'
4. Tell the script this is your accordion $('.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();
});