另一个“切换可见性”问题

Question

我坚持使用以下代码：

http://jsfiddle.net/2v4aJ/

我想使用隐藏/可见来切换一些文字。

我正在使用javascript函数向页面添加动态文本，这就是我使用.live ...

的原因

我可以切换隐藏，但不能看到（if（$（'＃1'）。is（'：hidden'））永远不会真实。）

任何帮助表示赞赏： - ）

Answer 1

问题在于:hidden伪选择器将visibility:hidden的元素视为可见，因为它们仍会占用页面上的空间。来自jQuery文档：

  

具有可见性的元素：隐藏或不透明度：0被认为是   可见，因为它们仍然占用了布局中的空间。

相反，您可以检查CSS属性本身的值：

if($('#1').css("visibility") === "hidden") {
    $('#1').css('visibility','visible');
}
else {
    $('#1').css('visibility','hidden');
}

Answer 2

根据jQuery docs on :hidden，

  

具有可见性：隐藏的元素被认为是可见的，因为它们仍占用布局中的空间

所以你最好检查价值。

if ($('#1').css('visibility')==='hidden')

或使用其他方法

Answer 3

首先，:hidden选择器不适合您：

  

具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍占用布局中的空间。

您可以使用:visible选择器，但仅当元素不可见且display:none时才有效。在您的情况下，您需要检查css属性：

另外，请注意visibility:hidden为元素display:none保留空间 - 不是;

如果您不需要为它预留空间，我建议使用：

        $('#text').click(function() {
            $('#2').toggle();
        });  

代码：http://jsfiddle.net/2v4aJ/6/

Answer 4

使用toggle命令。

$('#1').toggle(true); //show
$('#1').toggle(false); //hide
$('#1').toggle(); //flip