jQuery toggle open li при нажатии на закрытие li

Question

Я работал и искал это в течение нескольких часов, но мой подход не работает.

Это моя ситуация:

FIDDLE

Если я нажимаю на одном из двух "подменю-ebene1" они переключения. Но когда я нажимаю на другой, я хочу тот, который в настоящее время открыт, чтобы закрыть его снова. Такое же поведение для Link 1 и Link 2 внутри.

IMHO все, что мне нужно сделать, - это искать родных братьев моего подменю-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(); 
});