JQuery slideToggle вложенных ули

Question

FIDDLE

Недавно я изменил мою разметку и с тех пор моя функция переключения JQuery не работает больше. Я пытался справиться с этим, но у меня есть несколько требований, которые я просто не знаю, как их решить.

Вот что я хочу добиться:

1. нажав на ссылку 1 или 2 slideToggles его уль (с подканалом 1 и т.д.)

2. мыши на подканалом 1 или 2 slideToggle его уль (с Snippet 1 и т. Д.)

3. нажав на любой закрытый элемент, он должен ЗАКРЫТЬ любой другой открытый элемент. Значит, когда ссылка 2 открыта, и я нажимаю ссылку 1, ссылка 2 должна закрываться. Когда Sublink 2 открыт, и я нажимаю на Sublink 1, Sublink 2 должен закрыться. И важно: когда Sublink 1 под Link 1 открыт, я нажимаю Link 2, а затем снова на Link 1, Sublink 1 должен быть закрыт и не оставлен открытым

4. Щелчок дважды на том же элементе не должен переключаться в и в то же время

5. должно быть возможно иметь, например, Link x, Sublink x AND Snippet x с классом «active», чтобы узнать, где именно он (active = other backgroundcolor). Так что мой toggleClass не то, что правильно ..

Для того, чтобы иметь возможность изменить внешний вид элементов списка, вы должны изменить режим отображения из none в block

$("#sidebar-left .submenu-ebene2").css('display', 'block'); 
$("#sidebar-left .submenu-ebene3").css('display', 'none'); 

Любой помощь приветствуется. Спасибо, что нашли время!

Вот JQuery:

$("#sidebar-left .submenu-ebene2").css('display', 'none'); 
    $("#sidebar-left .submenu-ebene3").css('display', 'none'); 
    $("ul > li.closed").click(function (e) { 
     if (e.target === this) { 
      $(this).siblings("li.open").find(" > ul").slideToggle('fast', function() { 
       $(this).parents("li.open:first").toggleClass("open closed"); 
      }); 

      $(this).toggleClass("closed open").find(" > ul").slideToggle('fast'); 
     } 
}); 

$(".link").click(function(e) { 
    $(".active").toggleClass("inactive active"); 
    $(this).addClass("active").removeClass("inactive"); 
}); 

FIDDLE

Answer 1

Попробуйте:

$("li").click(function (e) { 
     $(this).next("li").children(".submenu-ebene2").stop().slideToggle(); 
}); 
$(".submenu-ebene2 li").click(function() { 
    $(this).next("li").children(".submenu-ebene3").stop().slideToggle(); 
}); 

$(".link").click(function(e) { 
    $(".active").toggleClass("inactive active"); 
    $(this).addClass("active").removeClass("inactive"); 
}); 

Кроме того, скрыть .submenu-ebene2 с CSS

.submenu-ebene2 { 
    display: none; 
} 
.submenu-ebene3 { 
display: none; 
} 

http://jsfiddle.net/defmetalhead/pLv77/2/