我正在创建一个包含问题和解释的常见问题列表。默认情况下，我只想显示问题。
如果用户点击特定问题，则只有其答案应展开，关闭所有其他答案。
我正在使用嵌套循环。
<html>
<head>
<title></title>
</head>
<script>
function display(k){
for(i=1;i<=k;i++){
for(j=i; j<=i; j++){
document.getElementById('sol'+j).style.display="block";
}
document.getElementById('sol'+i).style.display="none";
}
}
</script>
<body>
<div id="faq1" onclick="display(1)">FAQ 1: Return Policy
<div id="sol1" style="display: none;">
Customer can replace products within 30 days from the days of purchase.
</div>
</div>
<div id="faq2" onclick="display(2)">FAQ 2: Warranty
<div id="sol2" style="display: none;">
Warranty would be solely fulfiled by the brand company.
</div>
</div>
<div id="faq3" onclick="display(3)">FAQ 3: Extended Warranty
<div id="sol3" style="display: none;">
Customer can apply for extended warranty for their products provided their products fulfil the TOS.
</div>
</div>
<div id="faq4" onclick="display(4)">FAQ 4: Address
<div id="sol4" style="display: none;">
Our company is situated in the heart of the city Jammu.
</div>
</div>
</body>
</html>
我尝试了不同的组合，但我陷入困境。
最佳答案
更简单的方法是为所有问题和所有答案添加一个 CSS 类。
然后指定，例如让我们使用 .answer，隐藏类元素 (.answer {display: none})。然后，使用 JS 为所有问题类元素创建一个事件监听器，单击后只需切换其子 div (.answer)。
这样您就可以避免代码中的许多错误和糟糕的设计选择，例如:重复的 id、内联样式、每个问题 div 的单独 onclick 属性等。
关于javascript - 如何使用嵌套for循环创建FAQ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20836223/