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>

我想要发生的是，当问题1被扩展并且您点击另一个问题时，它不仅会扩展该问题，而且会使问题1崩溃。

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。

Answer 2

我宁愿为你编写代码，也不愿意提出一般性的想法。这可以通过以下步骤来实现：

让你所有的答案div标记为某个班级说答案。
现在，因为所有的div都是第一次被隐藏了。而不是显示：无。使用css类hide-answer以避免重复代码。
```
.hide-answer{
 display:none
}
```
现在绑定一个onclick事件的答案。您可以通过div中的onclick元素或使用标准类名来操作dom并绑定onclick事件。 onclick javascript调用方法假设为toggleDivs（）
toggleDivs方法应该明智地将点击的问题类设置为show-answer，如下所示：
```
    .show-answer{
      display:block;
    }
```

以及show-answer到hide-answer的任何其他div。

通用步骤的原因让您尝试并从中了解更多信息。

希望它有所帮助！

Answer 3

我想你可能想在你的脚本中添加一个函数，如：

function collapse_all(){
  var answers = document.getElementsByClassName("button");
  for (var j = 0; j < answers.length; j++) {
    answers[j].style.display="none";
  }
  return true;
}

然后是一个按顺序调用两个函数的函数，在打开新答案之前折叠所有内容：

function open_answer(question){
    collapse_all();
    return toggleMe(question);
}

然后从HTML中调用该函数：

<input type="button"  onclick="return open_answer('para1');" value="Question 1" class="buttonClass">

如何在点击另一个时折叠打开的常见问题解答？

3 个答案: