Que tal gente, tengo un problema que me gustaría resolver sobre mi formulario de búsqueda, el problema es que quisiera poder ocultar mi cuadro de búsqueda, al hacer clic en cualquier parte de mi documento, menos claro en mi formulario donde está mi cuadro de búsqueda. El código html y jquery que tengo es el siguiente:
HTML
Código:
//icono de search (esta dentro de un nav)
<li class="search-menu-full"><a href="javascript:;" class="buscar"><span class="icon-search"></a></li>
//Cuadro de búsqueda
<div class="search">
<form action="" method="GET">
<input type="text" name="name" placeholder="Buscar" class="bar-search">
<input type="button" name="buscar" value="Buscar" class="btn-search">
</form>
</div>
JQUERY
Código:
// variable de mi cuadro de búsqueda
Var search_open = false
//función para ocultar y mostrar el cuadro de búsqueda
$('.buscar').click(function(){
if (search_open == false){
$('.search').animate({
top:'55'
});
search_open = true;
}
else {
search_open = false;
$('.search').animate({
top:'-10%'
});
}
});
Aclaro que no tengo mucha experiencia con jquery sola mente lo he usado para quitar y agregar clases a elementos. Bueno pues eso sería todo les agradezco de antemano cualquier comentario o consejo que me dejen. saludos