[SOLUCIONADO] ¿Ocultar mi formulario de búsqueda al hacer clic en cualquier otra parte?

felax92 · #1 (**permalink**) 10/10/2015, 12:50

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

sintel_1 · #2 (**permalink**) 10/10/2015, 16:46

hola

Para controlar la propagacion del evento puedes usar stopPropagation()
Tambien deberias de añadir una clase y eliminarla segun te interese.

Aqui tienes un ejemplo de lo que necesitas:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <title>titulo</title>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<style>
body {width:100%;height:100%;}
.search {position:absolute;top:-10%;background-color:yellow;}
#contenedor {background-color:silver;}
</style>
    
<script type="text/javascript"> 
$(document).ready(function(){   
  $('body').on('click', '.escucha' , function(){    
    $('.search').animate({
        top:'-10%'
       });
       $('#contenedor').removeClass('escucha');        
       });       
  $('.buscar').click(function(event){        
      $('.search').animate({
        top:'55'
        });    
        
      $('#contenedor').addClass('escucha'); 
      event.stopPropagation();
  });
  
    $('.bar-search , .btn-search').click(function(event){ 
       event.stopPropagation();
       });
 
});//fin de ready
         
</script>
</head>
<body>
<div id="contenedor">
    <ul>
  <li class="search-menu-full"><a href="javascript:;" class="buscar"><span class="icon-search">texto</a></li>
  </ul>
    <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>
     <p>texto</p><p>texto</p><p>texto</p><p>texto</p><p>texto</p>
</div>
</body> 
</html>

felax92 · #3 (**permalink**) 12/10/2015, 11:57

Cita:

Iniciado por sintel_1

hola

Para controlar la propagacion del evento puedes usar stopPropagation()
Tambien deberias de añadir una clase y eliminarla segun te interese.

Aqui tienes un ejemplo de lo que necesitas:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <title>titulo</title>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<style>
body {width:100%;height:100%;}
.search {position:absolute;top:-10%;background-color:yellow;}
#contenedor {background-color:silver;}
</style>
    
<script type="text/javascript"> 
$(document).ready(function(){   
  $('body').on('click', '.escucha' , function(){    
    $('.search').animate({
        top:'-10%'
       });
       $('#contenedor').removeClass('escucha');        
       });       
  $('.buscar').click(function(event){        
      $('.search').animate({
        top:'55'
        });    
        
      $('#contenedor').addClass('escucha'); 
      event.stopPropagation();
  });
  
    $('.bar-search , .btn-search').click(function(event){ 
       event.stopPropagation();
       });
 
});//fin de ready
         
</script>
</head>
<body>
<div id="contenedor">
    <ul>
  <li class="search-menu-full"><a href="javascript:;" class="buscar"><span class="icon-search">texto</a></li>
  </ul>
    <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>
     <p>texto</p><p>texto</p><p>texto</p><p>texto</p><p>texto</p>
</div>
</body> 
</html>

Muchas gracias es exactamente lo que estaba buscando, ya lo implemente en mi cuadro de búsqueda y de paso en mi menú responsivo. Saludos