jquery - 单击关闭的li时jQuery切换打开li

Question

我已经为此工作和搜索了几个小时，但我的方法不起作用。

这是我的情况：

小提琴

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

恕我直言，我需要做的就是在我的 submenu-ebene1 li 的兄弟姐妹中搜索当前具有“.active”类的兄弟姐妹，然后滑动切换。由于那里的标记不同，submenu-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() 显示和隐藏子子菜单

希望能满足你的需要:)

代码

//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();
});