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

请勿在内联样式中使用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，则隐藏并显示，它将再次以内联方式显示。

显示我建议另一种使用类的方法，并从style=""

中删除select

css：

   .hide { display: none };

jQuery的：

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

<强> DEMO

Jquery切换问题

5 个答案: