Как добавить класс при наведении другому элементу?

Question

[NinjaSystems]

Здравствуйте!

Есть горизонтальное меню с выпадающим списком. При наведении на пункт меню открывается выпадающий список. Но сейчас при наведении открываются списки под другими пунктами меню в том числе. Я думаю, что текущий пункт меню надо выбирать через this, но как правильно это написать? Как сделать на jquery чтобы открывался список только для пункта меню на который наведен курсор?

На CSS я не стал делать реализацию, так как у меня для устройств с разрешением меньше или равно 800px выпадающий список открывается по клику. Если есть идеи как сделать все это только на CSS, буду рад выслушать!

Текущий фрагмент кода:

$(document).ready(function () {
    let n = 800;
    if (window.innerWidth > n) {
        $('.mainmenu__item').hover(function () {
            $('.mainmenu__dropdown').toggleClass('show');
        });
    }
});

Comments

[NinjaSystems]

На текущий момент проблему с hover я решил. При наведении на пункт меню он выделяется и открывается выпадающий список. Если курсор покидает пункт меню или выпадающий список, то выделение снимается. Теперь осталось решить надо ли вешать событие клик для гаджетов или оно будет срабатывать автоматически? Ответьте, пожалуйста!
Код JS для hover:

$(document).ready(function () {
let n = 800;
if (window.innerWidth > n){
$('.topmenu__item').hover(function () {
let topmenuLink = $(this).find('.topmenu__link');
$(topmenuLink).addClass('topmenu__link_active');
$(this).find('.topmenu__dropdown').slideDown();
$('.topmenu__row').addClass('blackout');
},
function () {
let topmenuLink = $(this).find('.topmenu__link');
$(topmenuLink).removeClass('topmenu__link_active');
$(this).find('.topmenu__dropdown').slideUp('fast');
$('.topmenu__row').removeClass('blackout');
}
)
}
});

Answer 1

[Игорь]

Если на css то вот codepin , оно с мобильного так же по клику раскрывается,
или нужно именно по событию клика?