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

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

$('#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');
   }
});

---

我有一个错误：第一次点击按钮时，消息被隐藏，没有再次显示（但按钮的值更改为“显示”）。发生了什么？谢谢。

具有

可见性的元素：隐藏的
样式属性不会隐藏，因为它们在布局中占据空间。尝试：

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

或：

或：

从：

元素被视为隐藏的原因有以下几个：


它们的CSS显示值为“无”
它们是type=“hidden”的表单元素
它们的宽度和高度显式设置为0
祖先元素是隐藏的，因此该元素不会显示在页面上

具有
可见性的图元：隐藏的
样式属性不会隐藏，因为它们在布局中占据空间。尝试：

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

或：

或：

从：

元素被视为隐藏的原因有以下几个：


它们的CSS显示值为“无”
它们是type=“hidden”的表单元素
它们的宽度和高度显式设置为0
祖先元素是隐藏的，因此该元素不会显示在页面上

看看这个函数

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

看看这个函数

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

这是因为
css（'visibility'，'hidden'）
调用隐藏了消息，然后它就再也不会显示了，因为
show
方法不会更改
visibility
样式

然后，元素将在隐藏（显示=块，可见性=隐藏）和删除（显示=无，可见性=隐藏）之间切换。在一种状态下，元素会占用空间，但两种状态下都不会显示消息

只需删除设置
可见性的代码
样式，代码就可以工作了

演示：
这是因为
css（'visibility'，'hidden'）
调用隐藏了消息，然后它就再也不会显示了，因为
show
方法不会更改
可见性
样式

然后，元素将在隐藏（显示=块，可见性=隐藏）和删除（显示=无，可见性=隐藏）之间切换。在一种状态下，元素会占用空间，但两种状态下都不会显示消息

只需删除设置
可见性的代码
样式，代码就可以工作了

演示：
使用切换，而不是验证可见性。此代码有效：
使用切换，而不是验证可见性。此代码有效：
尝试：

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

尝试：

我不明白，如果你只是切换
#消息
id，为什么按钮也会消失……是的，你是对的。我以前写过一些不同的东西。这段代码运行良好。谢谢。我不明白如果你只是切换了
#消息
id，为什么按钮也会消失……是的，你是对的。我以前写过一些不同的东西。这段代码运行良好。谢谢。我认为bool也有真正的价值，因为每次点击按钮的值都会从“显示”变为“隐藏”，反之亦然。我还用我放在“如果”块中的警告消息对它进行了测试。@tatiana_c:是的，实际上是这样。我已经用更准确的描述和更正的代码更新了我的答案。非常感谢您的演示和答案。我认为bool也有真正的价值，因为每次点击按钮的值都会从“显示”变为“隐藏”，反之亦然。我还用我放在“如果”块中的警告消息对它进行了测试。@tatiana_c:是的，实际上是这样。我已经用更准确的描述和更正的代码更新了我的答案。非常感谢您的演示和答案。很好用，很好。谢谢！我尝试了所有三种选择，三种都完全正确。这是一个非常有趣的“长度”解决方案。谢谢！我尝试了所有三种选择，三种都完全正确。这是一个非常有趣的“长度”解决方案。
$('#hide_message_button').click(function(){
    $('#message').toggle();
});