Как оптимизировать код jQuery?

Question

[Сергей Ерин]

Здравствуйте, при клике на некоторые пункты меню открывается или скрывается подменю на адаптивной версии сайта. Подскажите, как можно оптимизировать или переписать этот кусок кода. Заранее спасибо

let chairs = $('.responsive-menu-items > ul > li:nth-child(6) > a'),
    chairsList = $('.responsive-menu-items > ul > li:nth-child(6) > ul'),
    accessories = $('.responsive-menu-items > ul > li:nth-child(11) > a'),
    accessoriesList = $('.responsive-menu-items > ul > li:nth-child(11) > ul'),
    component = $('.responsive-menu-items > ul > li:nth-child(12) > a'),
    componentList = $('.responsive-menu-items > ul > li:nth-child(12) > ul');

chairs.on('click', function() {
    chairsList.toggleClass('subcategories');
});

accessories.on('click', function() {
    accessoriesList.toggleClass('subcategories');
});

component.on('click', function() {
    componentList.toggleClass('subcategories');
});

Comments

[Maxim Kirshin]

Если есть возможность вместо nth-child задать li класс, то лучше сделать это, так как иначе если пункты меню поменяют местами - твой код работать не будет.

Answer 1

[Евгений]

$('.responsive-menu-items > ul > li').each(function () {
        let el = $(this),
            link = $('> a', el),
            ul = $('> ul', el);
        if (ul.length && window.matchMedia("(max-width: 400px)").matches) {
            link.click(function () {
                ul.toggleClass('subcategories');
                return false;
            })
        }
    })

fix

Answer 2

[SagePtr]

Можно повесить глобальный обработчик нажатия на корневой элемент, а в нём уже проверять, на какой именно элемент было произведено нажатие (через event.target), и если он обладает нужными свойствами - то применять к нему действие.
И так даже лучше, потому что в последствии не придётся заморачиваться над обработчиком при удалении или добавлении новых пунктов меню.