jqueryのショー非表示選択オプションブロック

Question

<div class="langs"> 
    <div class="flag"><h3>Country</h3> 
     <img id="flag" src="../media/images/flags/en.png"/> 
    </div> 
    <select class="select_country" name="country" id="select_country"> 
    <option>United States</option> 
    <option>Spain</option> 
    <option >France</option> 
    </select> 
    </div> 

のjQuery：

$(".langs").hover(function() { 
    $("#select_country").slideToggle('500').css({"display":"block"}); 

    }); 

私はマウスオーバーで文句を言わない選択ブロックを表示し、国を選択した後は、選択オプションのブロックを非表示にします。

Answer 1

このようなものはありますか？

$(".langs").mouseenter(function() { 
    $("#select_country").show(); // SHOW #select_country on mouse over 
}); 

$(".langs").mouseleave(function() { 
    $("#select_country").hide(); // HIDE #select_country on mouse out 
}); 

あなたはまた、（代わりに.SHOWの.slideDown()と.slideUp()を使用したい場合があります）と.hide（）

例：http://jsfiddle.net/xUWK6/1/

Answer 2

//By default hide the select box 
$("#select_country").hide(); 

//On mouseover it will show the select box 
$(".langs").mouseover(function() { 
    $("#select_country").show(); 
}); 

//Once you change the selection it will hide itself 
$("#select_country").change(function(){ 
    $(this).hide(); 
});