Закрытие элемента по клику вне его области, jquery?

Question

[Коля]

Здравствуйте, начал изучать js и параллельно jquery, столкнулся с одной трудностью... есть скрипт(надеюсь валидный:)), который при нажатии на кнопку открывает и при повторном нажатии закрывает блок(в данном случае div), что нужно дописать чтоб блок закрывался еше и при клике вне его области? вот код: jsfiddle.net/2C96u/1/

Answer 1

[Юрий Лобанов]

Конкретно в Вашем примере: jsfiddle.net/iiil/2C96u/3
Но я бы сделал саму функцию по-другому. Используйте toggleClass, например. Или toggle.

Answer 2

[Andrew Dabich]

Ещё как вариант добавить эти два обработчика. Так же работает как нужно.

$('.join, .join span').click(function (e) {
    return false;
});
    
$(document).click(function (e) {
    join.fadeOut(700);
    return false;
});

Comments

[Юрий Лобанов]

а если клик сработает на внутреннем элементе всплывающего окна? Надо перебирать всех родителей и проверять, нет ли там окна, как в моем примере.

[Юрий Лобанов]

@dabich хотя я не могу сделать так, чтобы доказать свою точку зрения )
Зато заметил, что в Вашем примере после закрытия по белому полю первый раз не срабатывает кнопка. Это связано с счетчиком indexClick. jsfiddle.net/iiil/2C96u/4
Наверное можно исправить, но не хочется думать как.

[Andrew Dabich]

@iiil Чаще всего чем проще решишь задачу, тем лучше она будет работать) Нужно мыслить проще. Во первых в такой задаче можно обойтись без счетчиков. Да и вообще написать в 2-3 раза меньше кода и будет идеально)

[Юрий Лобанов]

@dabich я об этом написал уже. Сказал, что сам бы использовал toggleClass и всю анимацию перевел бы в css3. Но закрытие окна по клику вне окна делается так, как привел я выше. Можете погуглить и Вы найдете много подобных вариаций. В частности Ваш пример без использования счетчика будет выдавать ошибку. Вам все равно придется делать проверку на наличие элементов. Кроме того, повторяю - клик может сработать на внутреннем элементе окна.

[Andrew Dabich]

@iiil Вот написал без счетчиков

joinLink.click( function(event) {
    join.fadeToggle(700);
    return false;
});

[Andrew Dabich]

@iiil Как и говорилось в 3 раза меньше кода.

[Andrew Dabich]

@iiil Хотя даже return false; ни к чему, это не ссылка чтобы отменять действие.

[Юрий Лобанов]

@dabich отличный вариант, только добавьте еще изменение цвета кнопки через тот же toogleClass, например.
Но что касается обработки клика вне окна - пока я остаюсь при своем мнении, что клик может срабатывать на внутреннем элементе, не доходя до родительского. Если я не прав - буду рад ошибиться.

[Andrew Dabich]

@iiil На счет клика я обычно использую метод jQuery .not() ограничивая от всего, тот на котором не должно скрывать. Но не привел в пример, только потому что не сработал когда редактировал ваш пример. Точно не могу знать почему. Посмотрите подробнее .not() и можно будет легче отслеживать клик по всем элементам кроме указанных.

[Юрий Лобанов]

@dabich ок, спасибо.

[Олег]

Андрей Дабич: в моем примере подскажите пожалуйста, как сделать закрытие меню по клику за его пределами https://jsfiddle.net/nugget_sti/vm7n60u4/ ни как не могу понять, как это реализовтаь. желательно с комментариями по каждой из строк вашего кода

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/5r7C2/24
Посмотрите пример. Футер открывается по клику на красный блок, а закрывается по клику на любое место, кроме непосредственно футера. Задача тривиальная и на тостере решалась не раз.

Comments

[Олег]

в моем примере подскажите пожалуйста, как сделать закрытие меню по клику за его пределами https://jsfiddle.net/nugget_sti/vm7n60u4/ ни как не могу понять, как это реализовтаь. желательно с комментариями по каждой из строк вашего кода

Answer 4

[The Whiz]

Посмотрите на оператор $('*') (звездочка) - https://api.jquery.com/all-selector/

Он отслеживает все элементы на странице :)

Как вариант

$(document).on('click', function () {
...
});

По коду - можно обратить внимание на toggle

$joinLink.click(function() {
  $joinSpace.toggle( "slow", function() {
   
  });
});