2012-03-06 3 views
1
<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와 :JQuery와 쇼 숨기기 옵션을 선택 블록

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

    }); 
내가 선택 블록을 표시 마우스 오버에 늘

및 국가를 선택 후이 옵션을 선택 블록을 숨 깁니다.

답변

0

이와 비슷한? http://jsfiddle.net/xUWK6/1/

+0

파이어 폭스에서 확인 작업,하지만 작동하지 않습니다

$(".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()와 .hide() 대신 .slideDown().slideUp()을 사용할 수 있습니다 IE와 google 크롬에서! –

+0

'.mouseover()'와'.mouseout()'를 대신 사용해 보시겠습니까? – Fabian

+0

select-> 옵션을 ul-> li 태그로 바꿨습니다. 이제 IE에서 작동하는 select-> 옵션과 Chrome이 제대로 작동하지 않습니다 (항목을 선택하지 않으면 사라집니다). –

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