javascript - 单击另一个时如何折叠打开的常见问题解答？

Question

我目前有以下代码使我的常见问题解答按钮在单击之前隐藏答案。单击它会显示答案，但当您单击另一个问题时，它会为每个问题展开答案，这最终会变得对于页面来说太长，而且页面上的文本太多。

<script type="text/javascript">
function toggleMe(a){

var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<input type="button"  onclick="return toggleMe('para1');" value="Question 1" class="buttonClass"><br>
<div class="button" id="para1" style="display:none" >

<br>Stupid, long answer
</div>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Question 2" class="buttonClass"><br>
<div class="button" id="para2" style="display:none" >
<br>
Stupid, long answer 2
</div>
<br>

我希望发生的情况是，当 question1 展开并且您单击另一个问题时，它不仅会展开该问题，而且会折叠 question1。

TIA

Answer 1

因为所有答案都有 button 类，您可以先隐藏所有带有 button 类的 div，然后运行其余代码。

function toggleMe(a){
 //Collapse all answers
   var elements=document.getElementsByClassName("button");
   for (var i=0;i<elements.length;i+=1){
    elements[i].style.display = 'none';
   }
 //Toggle a particular answer
 var e=document.getElementById(a);
 if(!e) return true;
 if(e.style.display=="none"){
  e.style.display="block"
 }
 else{
  e.style.display="none"
 }
 return true;   
}

它迭代地将 display:none 属性设置为所有类为 button 的 div。