Этот вопрос является продолжением темы jQuery: поведение программы после добавления css-класса. В том вопросе рассматривалось типичное hamburger-меню. Оказалось, что в опубликованном коде ошибок не было, а просто функция конфликтует с ещё одной, которая не включена в код. Разрешение этого конфликта и является предметом обсуждения текущего вопроса.
Работающая функция, выдвигающая меню по нажатию кнопки:
$(".menu-btn:first").click(switchMenu);
function switchMenu() {
var menu = $(".menu:first");
if (!menu.hasClass('menu-show')) {
menu.addClass('menu-show');
} else {
menu.removeClass('menu-show');
}
};
Теперь мы хотим, чтобо меню можно было убрать ещё и при клике в любое место вне поля этого меню. Функция для этого есть:
$(function($){
$(document).mouseup(function (e){
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
menu.removeClass('menu-show');
}
});
});
Однако, это две функции конфликтуют:
- Если обе функции будут идти друг за другом в указанном порядке, то переменная
menu
не будет доступна во второй функции, потому меню будет убираться при нажатии на кнопку, но не при клике вне поля меню. - Если переменную
menu
вынести за пределы функции, то ситуация изменится на прямо противоположную: меню не будет закрываться кнопкой, но при клике вне поля - исчезнет.
Как можно объединить функционал двух функций в минимум строк?
Исходник здесь. Сейчас меню закрывается только при клике вне меню. Если убрать весь JS-код, кроме первых трёх строк, то будет закрываться только кнопкой.
event.stopPropagation();
jsfiddle.net/t3z7xy57/1 – Igor 8 ноя '16 в 1:36