clic all'esterno> hide()

Question

Ho questo codice jQuery: Codice

$(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); 
}); }); 

e 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 domanda è: come posso fare quando si fa clic al di fuori della id #search, nascondere #searchoptions?

ho provato con il corpo clic, ma avere bug ... e non funziona perfettamente ...

Answer 1

Corpo clic deve funziona perfettamente. L'unica cosa da fare è fermare la propagazione dell'evento. Questo dovrebbe funzionare ...

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

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

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

Answer 2

Ebbene, dal momento che un click() altro punto della pagina chiamerà in modo efficace il gestore $(searchbox).blur() eventi, si può solo aggiungere qualcosa lì per ottenere il tuo effetto:

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

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

}); 

JS Fiddle demo.

Answer 3

Che cosa si può fare è associare un evento click al documento che si nasconde la discesa se qualcosa al di fuori della discesa si fa clic, ma non nasconderà se qualcosa dentro la discesa si fa 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(); 
      } 
     }); 

    }); 
}); 

Poi, quando nasconderlo, sciogliere l'evento click

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