javascript - 使用 Javascript 显示和隐藏文本

Question

我有一些 javascript 代码用于我网站的常见问题解答页面。因此，您单击问题并显示答案。现在，我想不通的是，当我点击一个问题时它是打开的，当我点击另一个问题时我希望前一个问题关闭。基本上，一次只能打开一个。找到了类似的代码，但不完全是我要找的。

任何帮助都会很棒，这是我的代码。谢谢!!!!凯特

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>

<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>

<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>

Answer 1

使用变量存储对先前显示的元素的引用，然后在显示要取消隐藏的元素之前隐藏它

<script type="text/javascript">
    var previous;
    function unhide(divID) {
        var item = document.getElementById(divID);

        if (previous != null)
            previous.className='hidden';

        if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
            previous = item;
        }
    }
</script>

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>

<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>

<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>

例子
http://jsfiddle.net/hLkks