0

小提琴

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

这是我想要实现的目标：

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

  2. 单击子链接 1 或 2 幻灯片切换其 ul（使用 Snippet 1 等）

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

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

  5. 应该可以有例如Link x、Sublink x AND Snippet 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");
});

小提琴

4

1 回答 1

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/

于 2013-11-06T17:13:16.610 回答