Question

有按钮（id =“hide_message_button”）和消息（id =“message”）。单击按钮应隐藏/显示消息。源代码：

$('#hide_message_button').click(function(){
   var bool = $('#message').css('visibility','hidden').is(':hidden');
   if(bool){
      $('#message').show();
      $(this).val('Hide');
   }
   else {
      $('#message').hide();
      $(this).val('Show');
   }
});

我有一个错误：首先点击按钮隐藏了消息，但没有再显示（但按钮的值更改为“显示”）。怎么了？感谢。

Answer 1

具有visibility: hidden样式属性的元素不隐藏，因为它们占用布局中的空间。尝试：

var bool = $('#message').is(":hidden");

或：

var bool = $('#message:hidden').length;

或：

var bool = $('#message').css("display") == "none";

来自manual：

由于以下几个原因，可以将元素视为隐藏：


CSS显示值为none。

它们是type =＆＃34; hidden＆＃34;。
的表单元素
它们的宽度和高度明确设置为0.

隐藏了一个祖先元素，因此页面上不会显示该元素。

Answer 2

这是因为css('visibility','hidden')调用正在隐藏消息，然后它再也不会显示，因为show方法不会更改visibility样式。

然后，元素将在隐藏（display = block，visibility = hidden）和被删除（display = none，visibility = hidden）之间切换。在一种状态下，元素占用空间，但消息不会在任何一种状态下显示。

只需删除设置visibility样式的代码，代码即可。

演示：http://jsfiddle.net/Guffa/JqE3Y/

Answer 3

尝试：

$('#hide_message_button').click(function(){
    $('#message').toggle();
});

Answer 4

使用切换而不是验证可见性。此代码有效：http://jsfiddle.net/8qu9y/

Answer 5

查看toggle功能。

<input type="button" id="hide_message_button" value="My button" />
<p id="message">A message</p>

和

$('#hide_message_button').click(function(){
   $('#message').toggle();
});

如何使用jQuery显示/隐藏DOM元素？

5 个答案: