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

您可能还想使用 .slideDown() 和 .slideUp() 代替 .show() 和 .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();
});