@sedoyky4er

Как реализовать форму поиска?

Дорогие друзья!

Начал изучать jQuery, возникла необходимость создать форму поиска. Допустим есть кнопка, при нажатии на которую input выезжает и становиться в фокусе, если нажимаю кнопку еще раз или форма теряет фокус, она успешно уезжает обратно.

Реализовал, при нажатии на кнопку выезжает/заезжает input, но вот как только фокус пропадает нечего не происходит, попробовал реализовать разными способами, не выходит и вот уже отчаялся и пришел к вам, подскажите, что не так?!
$('.search_btn').click(
		function(){
			$('.search').animate({width:'toggle'},350).focus();

			if($('.search').is('focus') == false){

				$('.search').blur();
			}
		}
	);


<nav class="nav">
	<form>	
		<input type="search" class="search" />
	</form>
	<button class="search_btn"></button>
</nav>

.nav{
			width:1000px;
			position: relative;
			margin:0 auto;
		}

		.search{
			width:100%;
			height: 30px;
			display: none;
			float:right;
			display: none;
		}

		.search_btn{
			width:20px;
			height:20px;
			background: red;
			display: inline;
			position: absolute;
			top:5px;
			right:5px;
		}
  • Вопрос задан
  • 141 просмотр
Пригласить эксперта
Ответы на вопрос 2
Cyapa
@Cyapa
Если коротко:
$('.search').focusout
(
	function()
	{
		$('.search').animate({width: 'hide'}, 350);
	}
);


Но учти что в твоем коде проблемы с обработкой события клика.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы