Jquery切換問題

Question

我該如何去隱藏選擇元素，每當我點擊它會顯示的按鈕，當我再次點擊它會隱藏它？到目前爲止，我有以下代碼它似乎沒有按照我的預期工作。我知道切換可能是在jQuery中解決這個問題的方法。

<form id="myForm"> 
<input type='button' name='button' id='testbtn' value='Test Button' /> 
<br> 
<select style="visibility:hidden" id='List' name='List'/> 
</form> 

$("#testbtn").click(function() { 
    $('#List').toggle(); 
}); 

Answer 1

變更可見性：隱藏顯示：無。 JQuery切換顯示屬性。

<form id="myForm"> 
<input type='button' name='button' id='testbtn' value='Test Button' /> 
<br> 
<select style="display: none;" id='List' name='List'/> 
</form> 

$("#testbtn").click(function() { 
    $('#List').toggle(); 
}); 

http://jsfiddle.net/apQYD/1/

Answer 2

變化：

<select style="visibility:hidden" id='List' name='List'/> </form>

要：

<select style="display:none" id='List' name='List'/> </form>

jQuery.toggle修改display CSS屬性

http://api.jquery.com/toggle/

Answer 3

不要在您的內聯樣式中使用visibility:hidden。改爲使用display:none。

Answer 4

據我所知，toggle（）依賴於display屬性，而不是依賴於可見性。

嘗試設置display：none而不是visibility：hidden。

<select style="display:none" id='List' name='List'/> 

Answer 5

Here提清楚，

的display屬性被保存，並根據需要恢復。如果一個元素的內聯值爲display，那麼它將被隱藏並顯示，它將再次以內聯方式顯示。

節目，我建議另一種方式來使用類和select

CSS刪除style=""：

.hide { display: none }; 

的jQuery：

$("#testbtn").click(function() { 
    $('#List').toggleClass('hide'); 
}); 

DEMO