Не закрывается выпадающее меню по клику

732
25 ноября 2016, 08:54

Написал скрипт, который открывает выпадающее меню. Скрипт умеет:

  • закрывать уже открытые ранее выпадающие меню, если было открыто новое
  • закрывать выпадающее меню по клику в любое место на экране

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

$(function() {
    var touch = $('li .menu-link.drop-down');
    var menuWrapper = $('.menu-item-list');
    var w = $(window).width();
    $(touch).on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        var menu = $(this).closest('li').find('.dropdown-list');
        var isClosed = menu.is(':hidden');
        if(w > 992) { menuWrapper.find('.dropdown-list').removeClass('active') }
        else if(w < 992) { menuWrapper.find('.dropdown-list').slideUp(320) }
        if(w > 992) { menu.toggleClass('active') }
        else if(w < 992) {
            if(isClosed) { menu.slideDown(325) }
        }
    });
    $('body').on('click', function (e) {
        var dropdown = $('.dropdown-list');
        if(!$('.dropdown-list').is(e.target) && $('.dropdown-list').has(e.target).length === 0 && $(touch).has(e.target).length === 0) {
            dropdown.removeClass('active');
        }
    });
    $(window).resize(function(){
        var menu = $('li .menu-link ~ .dropdown-list');
        if(w > 992 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});
Answer 1

Проблема в комбинации

menuWrapper.find('.dropdown-list').removeClass('active')

и

menu.toggleClass('active')

Вы сначала убираете у всех класс active, a потом вызываете toggleClass.

Добавьте not(menu) в

menuWrapper.find('.dropdown-list').not(menu).removeClass('active')
READ ALSO
Убрать выпадающий список при клике вне списка

Убрать выпадающий список при клике вне списка

Есть селект, но сделан через ул списокСелект при клике открывается и при обратном клике на него закрывается, но если кликать вне его диапазоне...

775
Клик по фрейму на мобильных устройствах

Клик по фрейму на мобильных устройствах

Подскажите плз как сделать клик по фрейму на мобильных устройствах при открытии страницыНапример поставить лайк или запустить видео

538
Присвоение класса disabled к input[type=&#39;number&#39;]

Присвоение класса disabled к input[type='number']

Перерисовал input[type='number'] под нужный мне стильВсё работает отлично и точно так, как я и хотел

650
Изменение маршрута по клику

Изменение маршрута по клику

Можно ли как-то исправить код, что бы при клике на ссылку менялся маршрутТ

774