Question

我有一个简单的测试html文件：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  .faqs { visibility: hidden; }
  .q { color:blue; }
</style>
<script type="text/javascript">
function toggleElement(id)
{
    if(document.getElementById(id).style.visibility== 'hidden')
        { document.getElementById(id).style.visibility = 'visible'; }
    else
        { document.getElementById(id).style.visibility = 'hidden'; }
}   
</script>
</head>
<body>

<p class="q"><a onclick="toggleElement('1');">toggle 1.</a></p>
<div class="faqs" id="1">
<p>Answer 1.</p>
</div>

<p class="q"><a onclick="toggleElement('2');">toggle 2.</a></p>
<div class="faqs" id="2">
<p>Answer 2.</p>

</body>
</html>

当我在Firefox或Chromium（Linux）中运行它时，只需点击两次即可打开隐藏的“答案”。但之后只需点击一下。为什么是这样？ - 或者更确切地说，如何通过单击始终打开隐藏文本？

这个问题类似于needs 2 clicks to toggle after click on body，没有人回答。

-TYVM

Answer 1

此检查：

if(document.getElementById(id).style.visibility== 'hidden'){...}

由于style.visibility没有内联样式，因此

无法正常工作，因此第一次将值设置为hidden时，第二次就可以了，现在正常工作。

要解决此问题，最简单的方法是为元素添加内联样式，如：

<div class="faqs" id="1" style="visibility:hidden;"></div>

如果您不想使用内联样式，可以使用getComputedStyle()，它返回元素的所有当前样式。

你这样使用它：

var element = document.getElementById('someIdHere'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

Answer 2

你可以试试这个：

function toggleElement(id)
{
    var element      = document.getElementById(id);
    var elementStyle = window.getComputedStyle(element);
    element.style.visibility = (elementStyle.visibility == 'hidden') ? 'visible' : 'hidden';
}

最初，该元素没有任何可见性样式。要使其工作，您可以使用上面的 getComputedStyle 函数。

首先，两次单击以切换打开隐藏元素，但之后单击一次

2 个答案: