展览及展览；用Javascript隐藏文本

我有一些javascript代码用于我的站点的FAQ页面。因此，单击问题，就会出现答案。现在，我不明白的是，当我点击一个问题时，这个问题是开放的，当我点击另一个问题时，我希望前一个问题关闭。基本上，一次只能打开一个。找到类似的代码，但不完全是我要找的

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

<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>

函数取消隐藏（divID）{
var item=document.getElementById（divID）；
如果（项目）{
item.className=（item.className='hidden'）？'unhidden'：'hidden'；
}
}

答案就在这里


第二个答案在这里

给所有答案起一个类名，然后选择所有答案并隐藏它们，然后再显示刚才单击的答案。如果您使用的是jQuery

$(".answers").addClass("hidden");
$("#"+id).removeClass("hidden");

---

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

<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>

var-previous；
函数取消隐藏（divID）{
var item=document.getElementById（divID）；
如果（上一个！=null）
previous.className='hidden'；
如果（项目）{
item.className=（item.className='hidden'）？'unhidden'：'hidden'；
先前=项目；
}
}

答案就在这里


第二个答案在这里

示例

下面是一个示例，其中显示类是展开还是折叠

因此，在CSS中展开并折叠一个

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

var当前项目； 函数取消隐藏（divID）{ 如果（当前项目）{ currentItem.className='隐藏'； currentItem=null； } var item=document.getElementById（divID）； 如果（项目）{ item.className='unhidden'； 当前项目=项目； } }

---

有一个非常简单的方法。改进Wryte的答案，只需在所有项目中添加一个click事件，将一个类添加到活动项目中，并将其从所有其他项目中删除

item.addEventListener("click", function () {
    var items = this.parentNode.childNodes;

    for (var i=0; i < items.length; i++) {
        items[i].className = "";
    }
    this.className = "active";
}, false);

---

在这个场景中，使用手风琴式@axrwkr可能会更快，它的重量相当大。您使用jQuery吗？@axrwkr不会解决这个问题，但这很好！剪掉那个笨蛋。会放在我的后口袋里供以后使用。。谢谢

item.addEventListener("click", function () {
    var items = this.parentNode.childNodes;

    for (var i=0; i < items.length; i++) {
        items[i].className = "";
    }
    this.className = "active";
}, false);

li {
    height: 2em;
    background: green;
    overflow: hidden;
    margin-bottom: 5px;
}
.active {
    height: auto;
}