Question

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

这是我想要实现的目标：

点击Link 1或2 slideToggles ul（带链接1等）
点击子链接1或2 slideToggle其ul（使用Snippet 1等）
点击任何已关闭的元素，它应该关闭任何其他打开的元素。意味着当链接2打开并且我点击链接1时，链接2应该关闭。当Sublink 2打开并且我点击Sublink 1时，Sublink 2应该关闭。并且重要的是：当链接1下的子链接1打开时，我点击链接2然后再点击链接1，子链接1应该关闭而不是仍然保持打开
在同一元素上点击两次不应该同时切入和切出
应该可以有例如将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");
});

另外，用css

隐藏.submenu-ebene2

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

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

jQuery slideToggle嵌套ul

1 个答案: