Jquery Toggle Problem

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

Изменение:

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

Изменить видимость: скрыто для отображения: нет. 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 3

Здесь четко указать, что

Свойство display сохраняется и восстанавливается по мере необходимости. Если элемент имеет значение display inline, то он скрыт и показан, он снова будет отображаться inline.

показать, что я предлагаю другой способ использования класса и удалить style="" из select

css:

   .hide { display: none };

JQuery:

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

DEMO

Answer 4

Насколько я знаю, toggle () зависит от свойства display, а не от свойства visibility.

Попробуйте установить отображение: none вместо видимости: hidden.

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

Answer 5

Не используйте visibility:hidden в своем стиле. Вместо этого используйте display:none.