Как правильно показывать\скрывать поиск на сайте?

Question

[GaserV]

Добрый день! Подскажите пожалуйста. У меня есть search. При клике на иконку к search добавляется класс active и он становится видимым. Теперь, мне нужно, при клике на любое место, кроме самого поиска, убрать этот класс active. Как реализовать? Прикрепил кусок кода, но видимо не логичный, поскольку класс добавляется и удаляется одновременно.

$('body').on('click', function(e){
		$('.search').removeClass('active');
	})

	$('.search-icon').on('click', function(){
		$(this).parent().find('.search').toggleClass('active');

		var field = $(this).parent().find('.form-input-text');

		field.focus();

	});

Answer 1

[Сергей Горностаев]

Убрать "$('body').on('click')" и добавить

$('.form-input-text').blur(function() {
	$(this).parent().toggleClass('active');
});

https://jsfiddle.net/se6nfoe2/

Comments

[GaserV]

а причем здесь blur? У меня первоначально поиск скрыт. А класс добавляется при клике на .search-icon

[Сергей Горностаев]

А с slideDown/slideUp ещё лучше https://jsfiddle.net/se6nfoe2/1/

[Сергей Горностаев]

GaserV: по ссылке-то сходили? Там тоже поиск первоначально скрыт и появляется при клике на .search-icon. А при потери полем поиска фокуса, срабатывает blur и панель .search опять скрывается.

[GaserV]

Сергей Горностаев: спасибо. Только в моем случае, вместо parent() я заюзал closest('.search'). А со способом slideDown/Up перед анимацией вызывать stop() нужно, ибо если кликнешь раз 10 то он и будет кататься туда-суда пока не успокоится)

Спасибо)

Answer 2

[Дмитрий Клусевич]

Я бы сделал, так.
https://jsfiddle.net/ox6yt5ru/

Answer 3

[Максим Люмен]

https://jsfiddle.net/8hpwsrgp/2/ может так надо ?

P:S посмотрел я примеры выше , такое ни когда и ни где на сайтах я не видел и даже стрёмно предлогать было бы

Comments

[GaserV]

Так ваш пример не решил то мою проблему. У меня проблема в том, что нужно скрывать эл-т при клике в любое другое место, кроме него.. А в вашем примере, поиск просто показывается при клике.

[Максим Люмен]

GaserV: ну так дорабатывайте , это в jquery - там написано же , создайте фиктивный блок пустой , на весь экран и на всю ширину и два условия 1) при клике на toggleClass 2) при клике на тот самый элемент

[GaserV]

Максим Люмен: $('body').on('click', function(e){
if ($(e.target).closest('.search').length == 0){
$('.search').removeClass('active');
}
});