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

Question

我坚持用下面的代码：

http://jsfiddle.net/2v4aJ/

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

我使用JavaScript函数来动态文本添加到页面中，这就是为什么我用.live ...

我可以切换为隐藏，但不可见（如果（$（“＃1”） .is（'：hidden'））永远不会是真的）。

赞赏:-)

Answer 1

根据 jQuery docs on :hidden

，

元素与visibility：hidden的被认为是可见的，因为他们仍然在布局消费空间

所以你最好检查价值。

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

或使用其他方法

Answer 2

该问题的任何帮助，与visibility:hidden为可见的:hidden伪选择对待元素，因为他们仍然占用空间在页面上。从jQuery文档：

元素与visibility：hidden的或不透明度：0被认为是 可见的，因为他们仍然在消耗布局空间。

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

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

Answer 3

所有:hidden选择的首先是不适合你：

元素与visibility：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