Question

我一直在工作和搜索这几个小时，但我的方法不起作用。

这是我的情况：

如果我点击两个“submenu-ebene1”中的一个，他们就会切换。但当我点击另一个时，我希望当前打开的那个再次关闭。内部链接1和链接2的行为相同。

恕我直言，我需要做的就是搜索我的submenu-ebene1 li的兄弟姐妹，找到目前拥有“.active”类的那个，然后使用slideToggle。由于不同的标记，子菜单ebene2几乎相同。

我试着这样做：

//toggle submenu-ebene1
$("submenu-ebene1").on("click", function() {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function() {
    $(this).siblings(".active-ebene2").slideToggle();
});

我希望首先得到一些提示而不是解决方案 - 我来这里学习，让我发疯，不理解那种简单的切换。

Answer 1

喜欢这个 http://jsfiddle.net/SyYzY/ 或 http://jsfiddle.net/aN5ey/

可能会有所帮助：jQuery .toggle() to show and hide a sub sub-menu

希望它符合您的需求:)

<强>代码

//apply active-classes to submenu-ebene1
$(".link").click(function () {
    $(".submenu-ebene2").slideUp();
    $(".active").toggleClass("inactive active");
    $(this).addClass("active").removeClass("inactive");
});

//apply active-classes to submenu-ebene2
$(".submenu-ebene2 > li.inactive-ebene2").click(function (e) {
    $(".active-ebene2").toggleClass("inactive-ebene2 active-ebene2");
    $(this).addClass("active-ebene2").removeClass("inactive-ebene2");
});

// submenu-ebene1 toggle
$(".submenu li").click(function (e) {
    $(this).next("li").children(".submenu-ebene2").slideToggle();
});

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




//toggle submenu-ebene1
$("submenu-ebene1").on("click", function () {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function () {
    $(this).siblings(".active-ebene2").slideToggle();
});

点击关闭的li时，jQuery切换打开li

1 个答案: