Когда то на одном проекте, второпях написал код для очень запутанной многоуровневой навигации с кучей подменю.
Конкретно этот кусок отвечал за отображение следующего уровня меню с содержанием соответствующим нажатой кнопке. То есть при нажатии на кнопку с одним из классов [".1st", ".2nd", ".3rd"], элемент в другом блоке, например div.1st_list получает класс .active, но если .2nd уже .2nd.active, то сначала у .2nd.active удаляется .active и уже потом div.1st_list получает .active.
То есть одновременно активным может быть только один элемент.
$(function() {
Sub_menus = [".1st", ".2nd", ".3rd"]
for (var i = 0; i < Sub_menus.length; i++) {
(function(sub_item) {
$("." + sub_item + "_item").click(function() {
if ($("." + sub_item + "_list.active")[0]) {
$(".gne_snd .dynamic_inner>div").removeClass("active");
$(".gne_snd").removeClass("active");
$(this).removeClass("for_anim");
} else if ($(".gne_snd.active")[0]) {
$(".gne_snd .dynamic_inner>div").removeClass("active");
$("." + sub_item + "_list").toggleClass("active");
} else {
$(".gne_snd").toggleClass("active");
$("." + sub_item + "_list").toggleClass("active");
}
});
})(Sub_menus[i]);
}});
Поскольку и JS, и jQuery знаю очень поверхностно, написал как мог.
И собственно, что хочу узнать.
Есть ли более элегантные, может быть эффективные, решения для подобных задач? Как еще можно написать код для такой задачи?