> ocultar()

Question

tengo este código jQuery: Código

$(document).ready(function(){ 
//global vars 
var searchBoxes = $(".box"); 
var searchBox = $(".box"); 
var searchBoxDefault = "Search..."; 

searchBoxes.focus(function(e){ 
    $(this).addClass("active"); 
    $('#searchoptions').show(); 
}); 
searchBoxes.blur(function(e){ 
    $(this).removeClass("active"); 
}); 

searchBox.focus(function(){ 
    if($(this).attr("value") == searchBoxDefault) $(this).attr("value", ""); 
}); 
searchBox.blur(function(){ 
    if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault); 
}); }); 

y html:

<div id="search" class="right"> 
    <form method="post" class="clearfix"> 
    <input class="box left" type="text" value="Search..." /> 
    <input class="button right" type="submit" value="" /> 
    </form> 
    <div id="searchoptions"> 
    Options:<br /><input checked="checked" type="radio"> Option1</label> 
    <input type="radio"> Option2</label> 
    <input type="radio"> Option3</label> 
    </div> 
</div> 

La pregunta es: ¿Cómo puedo hacer que al hacer clic fuera de Identificación del #search, para ocultar #searchoptions?

me trató con cuerpo de clic, pero tiene bichos ... y no se ejecuta a la perfección ...

Answer 1

Haga clic en el cuerpo debería funcionan perfectamente. Lo único que hay que hacer es detener la propagación del evento. Esto debería funcionar ...

$('body').click(function() { 
     $('#searchoptions').hide(); 
}); 

$('#searchoptions').click(function(event){ 
     event.stopPropagation(); 
}); 

@see http://api.jquery.com/event.stopPropagation/

Answer 2

Bueno, ya que una click() en otra parte de la página se llame de manera efectiva el manejador $(searchbox).blur() caso, sólo podría añadir algo allí para lograr su efecto:

searchBox.blur(function(){ 
    if($(this).attr("value") == "") { 
     $(this).attr("value", searchBoxDefault); 
    } 

    $('#searchoptions').hide(); 

}); 

JS Fiddle demo.

Answer 3

Lo que puede hacer es enlazar un evento de clic al documento que ocultará el menú desplegable si se hace clic en el menú desplegable algo fuera, pero no ocultará si algo dentro de la lista desplegable que se hace clic

searchBoxes.focus(function(e){ 
    $(this).addClass("active"); 
    $('#searchoptions').show(function(){ 

     $(document).bind('click', function (e) { 
      var clicked = $(e.target); 
      if (!clicked.parents().hasClass("class-of-dropdown-container")) { 
       $('#searchoptions').hide(); 
      } 
     }); 

    }); 
}); 

Luego, cuando ocultarlo, desenlazar el evento click

$(document).unbind('click');