jQuery slideToggle嵌套ul

Question

小提琴

我最近更改了标记，从那时起，我的jQuery切换功能不再起作用。 我试图解决这个问题，但是我有一些我不知道如何解决的要求。

这是我要实现的目标：

1. 单击链接1或2 slide切换其ul（带有子链接1等）

2. 单击子链接1或2 slide切换其ul（使用代码段1等）

3. 单击任何关闭的元素，则应关闭任何其他打开的元素。 表示当链接2打开并且我单击链接1时，链接2应该关闭。 当打开子链接2并单击子链接1时，子链接2应该关闭。 重要的是：当打开链接1下的子链接1时，我单击链接2，然后再次单击链接1，子链接1应该关闭并且仍不打开

4. 在同一元素上单击两次不应同时切换

5. 应该有可能具有“活动”类的“链接x”，“子链接x”和“片段x”，以便使人确切知道他在哪里（活动=其他背景色）。 所以我的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");
});

小提琴

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");
});

另外，用CSS隐藏.submenu-ebene2

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

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