JQuery при нажатии на дочерний элемент добавляет класс к непрямому родительскому элементу ⇐ Jquery

[Anonymous]

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

jQuery(документ).ready(функция() { jQuery('.has-children').hover(function(){ jQuery('.header-jr').addClass('br-top-only'); },функция(){ jQuery('.header-jr').removeClass('br-top-only'); }); }); Это отлично работает, но теперь мне нужно преобразовать эту функцию в функцию, которая добавляет/удаляет класс только тогда, когда я нажимаю (а не навожу курсор) на элемент. Я думал, что следующая функция сработает, но это не сработало (ничего не произошло и нет ошибок в консоли).

jQuery(документ).ready(функция() { jQuery('.has-children').click(function(){ jQuery('.header-jr').addClass('br-top-only'); },функция(){ jQuery('.header-jr').removeClass('br-top-only'); }); }); Может кто-нибудь помочь мне с этим. Должен признаться, у меня почти 0 знаний в jQuery/JS, поэтому, если бы вы могли дать мне простое решение, это мне бы очень помогло.

PS1: .has-children — мой РЕБЕНОК, а .header-jr — мой РОДИТЕЛЬ.

PS2: дочерний элемент «.has-children» не находится непосредственно под родительским «.header-jr» в моем коде, у меня между ними около 5/6 div, поэтому я думаю, что не могу использовать «родительский» в jQuery.

РЕДАКТИРОВАТЬ (РЕШЕНИЕ): я нашел решение своего требования + дополнительную проблему (кто мне нужно было удалить класс, если я нажму в другом месте на странице, чего я не мог сделать) достичь только с помощью функции toggleClass).

jQuery(document).ready(function() { jQuery('.has-children').on('click', function(event){ jQuery('.header-jr').toggleClass('br-top-only'); });}); jQuery(документ).click(функция(e) { if(!jQuery(e.target).hasClass('имеет детей') ) { jQuery('.header-jr').removeClass('br-top-only'); } }); Возможно, это совсем не оптимально, но я не являюсь профессионалом в области jQuery, и мне это подходит.