Foros del Web - Ver Mensaje Individual - ¿Ocultar mi formulario de búsqueda al hacer clic en cualquier otra parte?

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