Как оптимизировать JavaScript-код для анимации меню?

Оффтоп javascript
1

Привет, ребята! Я тут пытаюсь сделать анимированное меню на сайте, но код получился слишком длинным и повторяющимся. Вот что у меня есть:

$('#свадьба').click(function() {
  $('.свадьба, .свадьба div').addClass('активно');
  $('.выпускной div, .история div, .команда div').removeClass('активно');
});

$('#выпускной').click(function() {
  $('.выпускной, .выпускной div').addClass('активно');
  $('.свадьба div, .история div, .команда div').removeClass('активно');
});

// ... и так далее для других пунктов меню

У меня 4 пункта меню, и когда кликаешь на один, он анимируется, а остальные возвращаются в исходное состояние. Как можно упростить этот код? Может, есть способ избежать повторений и сделать его более компактным? Буду благодарен за любые идеи по оптимизации!

2

эй, а как насчет использовать делегирование событий? это реально упростит код. примерно так:

$('#menu').on('click', '.menu-item', function() {
  var target = $(this).attr('id');
  $('.content-block, .content-block div').removeClass('активно');
  $(`.${target}, .${target} div`).addClass('активно');
});

тут обработчик вешается на родительский элемент #menu, а не на каждый пункт отдельно. плюс используем id элемента вместо data-атрибута. код становится короче и эффективнее. и кстати, не забудь добавить класс menu-item всем элементам меню в html.

3

Предлагаю использовать общий класс для всех пунктов меню и data-атрибуты. Примерно так:

$('.menu-item').click(function() {
  var target = $(this).data('target');
  $('.content-block, .content-block div').removeClass('активно');
  $(`.${target}, .${target} div`).addClass('активно');
});

В HTML добавь data-target каждому пункту меню. Это сократит код и сделает его более гибким. Если захочешь добавить новые пункты, просто обнови разметку, не трогая JS.

4

Можно еще упростить, используя атрибут селектора. Примерно так:

$(‘#menu’).on(‘click’, ‘[data-target]’, function() {
var target = $(this).data(‘target’);
$(‘.content-block’).removeClass(‘активно’);
$(target).addClass(‘активно’);
});

В HTML добавь атрибуты data-target=“#нужный-блок”. Так код станет еще короче и универсальнее. Плюс не нужно дублировать классы для div внутри блоков.