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

有按钮（ID = “hide_message_button”）和消息（ID = “消息”）。点击按钮应该隐藏/显示消息。源代码：如何显示与jQuery /隐藏DOM元素？

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

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

来源

2012-03-05 tatiana_c

尝试：

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

来源

2012-03-05 16:45:28

太棒了，它的工作原理。谢谢。 – 2012-03-05 16:54:13

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

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

或：

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

或：

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

从manual：

元素可以被认为是隐藏的几个原因：

他们有没有的CSS显示值。

它们是type =“hidden”的表单元素。

它们的宽度和高度明确设置为0.

祖先元素被隐藏，因此元素不会显示在页面上。

来源

2012-03-05 16:38:38 karim79

的感谢！我尝试了所有三个选项，三个都完全正确。 “长度”是非常有趣的解决方案。 – 2012-03-06 10:06:26

看看在toggle功能。

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

和

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

来源

2012-03-05 16:38:41 talnicolas

我不明白为什么按钮也消失了，如果你只是切换的'＃message' ID ... – talnicolas 2012-03-05 16:51:40

是的，你是对的。我写了一些不同的东西。此代码工作正常。谢谢。 – 2012-03-05 17:03:59

这是因为css('visibility','hidden')调用隐藏消息，然后它永远不会再次显示，因为show方法不改变visibility风格。

的元件随后将被隐藏（显示=块，能见度=隐藏）和被除去（显示=无，能见度=隐藏）之间切换。在一种状态下，元素占用空间，但是消息在两种状态中都不显示。

只是删除设置visibility风格的代码，代码工作。

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

来源

2012-03-05 16:38:45 Guffa

我认为布尔也具有真正的价值，因为按钮的值随着从“显示”到“隐藏”和反之亦然每次点击而改变。我还用警报消息测试了它，并将其放入“if”块中。 – 2012-03-05 16:58:47

@tatiana_c：是的，它的确如此。我已经用更准确的描述和更正的代码更新了我的答案。 – Guffa 2012-03-05 17:05:10

非常感谢您的演示和答案。它有效，它很棒。 – 2012-03-06 09:22:07

使用翻转而不是验证知名度。此代码的工作：http://jsfiddle.net/8qu9y/

来源

2012-03-05 16:42:31 user1242756

是的，谢谢。 – 2012-03-06 09:22:46

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

回答

相关问题