Отменить событие по клику

241

02 июля 2018, 07:00

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

Для этого, имеется вызов меню по кнопке:

$(document).ready(function () {
    $(".toggle").click(function () {
        $(".vertical_nav").slideToggle("300");
    });
});

Так же присутствует функция закрытия по клику вне меню:

jQuery(function($){
    $(document).mouseup(function (e){ 
        var div = $(".vertical_nav"); 
        if (!div.is(e.target) 
            && div.has(e.target).length === 0) { 
            div.hide(); 
        }
    });
});

Проблема: если клик происходит по кнопке вызова меню при уже открытом меню, оно не закрывается (что требуется) а открывается заново.

Вопрос: как при уже открытом меню заставить его закрываться при клике на кнопку вызова.

https://jsfiddle.net/xpvt214o/192304/

(При этом интересен вариант именно с использованием двух разных функций, т.к. функцию закрытия можно будет повесить на различные элементы, которые так же могут потребовать исчезновения по клику вне элемента)

Answer 1

У Вас по клику считывается событие и по body, и по ссылке + нужно использовать slideToggle() метод для закрытия/открытия dom элемента. Вот рабочий код

$(document).ready(function () {
            $(".toggle").click(function (e) {
                e.stopPropagation();
                $(".vertical_nav").slideToggle("300");
            });
            $(document).click(function (e){ 
                var div = $(".vertical_nav"); 
                if (!div.is(e.target) 
                    && div.has(e.target).length === 0) { 
                    div.hide(); 
                }
            });
        });