tıklayın dışında> hide()

Question

bu jquery kodu var:

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

ve html kodunu:

<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> 

soru şudur: Ben #search id dışında tıkladığınızda Nasıl sağlayabilirim, #searchoptions gizlemek için?

Ben vücut tıklama ile çalıştı, ancak hataları var ... ve mükemmel çalışmaz ... sayfanın başka bir yerinde bir click() etkili bir $(searchbox).blur() olay işleyicisi arayacak beri

Answer 1

Vücut tıklaması kusursuz çalışacaktır. Yapılacak tek şey, olay yayılmasını durdurmaktır. Bu ... çalışmalıdır açılan dışında bir şey tıklandığında açılan gizler belgeye bir tıklama etkinliğini bağlayan, ancak gizlemek olmaz Ne yapabilirsiniz

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

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

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

Answer 2

Eh, sadece bazı eklemeler yapabilirler Efektinize ulaşmak için:

JS Fiddle demo.

Answer 3

gizleyerek zaman açılır içinde bir şey Sonra

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

    }); 
}); 

tıklandığında o takdirde click olayı unbind

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