Как сделать в JQ Удаление классов при нажатии на другой блок?

Question

[Windramix]

$('.nav-toggle').on('click', function(e) {
  e.preventDefault();
    $('.nav-toggle').toggleClass('change'); 
    $('.menu__inner').toggleClass('open');
    $('body').toggleClass('no-scroll');
    $('.nav-toggle-name-1').toggleClass('invisible');
    $('.nav-toggle-name-2').toggleClass('visible');
  })
  
    $( '.nav a' ).on("click", function(){
    $('.nav-toggle').removeClass('change');
    $('.menu__inner').removeClass('open');
    $('body').removeClass('no-scroll');
    $('.nav-toggle-name-1').removeClass('invisible');
    $('.nav-toggle-name-2').removeClass('visible');
});

При нажатии на .nav-toggle добавляются классы.
Если при нажатии в меню этого блока ( '.nav a' ) то все классы убираются
но появилась задача что бы при клике вне области данного блока происходило тоже самое что при ( '.nav a' )

https://heavys.wcdemo.ru/ ссылка на сайт

Comments

[Anonymous Penguin]

Ого, какое понятное описание задачи

[Windramix]

Anonymous Penguin, Поправил =)

Answer 1

[Сергей delphinpro]

https://yandex.ru/search/?text=javascript+click+ou...

Comments

[Windramix]

Возможно ли вам дать более развернутый ответ, я гугл много по этому вопросу, в том числе по вашей ссылке, но совместить с моим кодом не получается, я только начал изучать jq (js) и меня мало понимания как должно бы более правильное совмещения с моим кодом.

Я неплохо верстаю могу сделать базовые вещи как добавить, убрать классы но вот такое, что бы совместить его с уже имеющимся кодом =(

Пытался с этим что-то придумать...

const menuBtn = $('.nav-toggle'),
      menu    = $('.menu__inner');

menuBtn.on('click', function() {
    $(this).toggleClass('change');
        menu.toggleClass('open');
    
});

$(document).click(function (e) {
    if ( !menuBtn.is(e.target) && !menu.is(e.target) && menu.has(e.target).length === 0) {
        menu.removeClass('open');
        menuBtn.removeClass('change');
    }
});

но почему то он через раз через раз работает, если открыть инспектор то можно видеть что при нажатии на nav-toggle - menu__inner мигает и иногда присваевает ему класс open

[Сергей delphinpro]

Windramix, учиться - это хорошо.

<div class=dropdown>

if ( !menuBtn.closest('.dropdown').length) {
    menu.removeClass('open');
    menuBtn.removeClass('change');
}

Answer 2

[burtellbee]

Что то вроде:

$(':not(.nav-toggle)').click(function(){alert('aaa')})

Comments

[Windramix]

у меня с jq (js) все плохо я только учусь не могли бы вы написать как конкретно это должно применяться в моем коде, я пытался с ним что-то придумать но не получилось =(