как удалить класс на другой элемент с toggleClass ближайшим

Question

Привет У меня это JQuery:

var $burger = $('#burger'), 
$body = $('body'), 
$main = $('main'), 
$menu = $('menu'), 
$menuItem = $('.nav__item--parent'), 
$trigger = $('.nav__item--parent > a'), 
$subMenu = $('.nav__sub-menu'); 

$burger.click(function() { 
    return $body.toggleClass('active'); 
    return false 
}); 
$('.nav__item--parent > a').click(function() { 
    $('.nav__item--parent.open').removeClass('open'); 
    $(this).closest('li').toggleClass('open'); 
    $main.toggleClass('push-down'); 
}); 

мне нужно .С вниз, чтобы быть удалены, если они нажимают ту же Ли снова.

/// /// Update

Я теперь использовал ответ ниже (спасибо), чтобы добраться до этого

$('.nav__item--parent > a').click(function() { 
    var $li = $(this).closest('li'); 
    $main.toggleClass('push-down', $li.hasClass('open')); 
    $('.nav__item--parent.open').removeClass('open'); 
    $li.toggleClass('open'); 
    $main.toggleClass('push-down'); 
}); 

Вопрос теперь, если они щелкают литий, который тумблер отбрасывание правильно мне нужно удалить. открыть? : -/

Answer 1

Проверьте "open" состояние ближайшего li с hasClass() прежде чем вы сделаете переключение. Если вы передадите boolean второй параметр в toggleClass, он устанавливает или очищает класс на основе значений true или false.

например.

$('.nav__item--parent > a').click(function() { 
    var $li = $(this).closest('li'); 
    $main.toggleClass('push-down', $li.hasClass('open')); 
    $('.nav__item--parent.open').removeClass('open'); 
    $li.toggleClass('open'); 
}); 

Примечание: toggleClass не является технически правильным в последней части (как он очищается от линии раньше, так что только устанавливает его). Вы хотите исключить щелчок LI от removeClass с помощью .not():

например.

$('.nav__item--parent > a').click(function() { 
    var $li = $(this).closest('li'); 
    $main.toggleClass('push-down', $li.hasClass('open')); 
    $('.nav__item--parent.open').not($li).removeClass('open'); 
    $li.toggleClass('open'); 
});