Javascript 相关下拉元素的if-else语句存在问题

我正在创建一系列下拉元素，其中包含一个最初可见的问题和一个答案，单击该问题可在

display:block

和

display:none

之间切换。单击每个问题的答案也会导致所有其他答案变为

display:none

我遇到的问题与下面的if-else语句有关。单击

问题时，隐藏与此问题无关的所有答案。如果下一个答案是
display:none
，则将其更改为
display:block

下一个if-else语句应该指示：如果下一个答案是
display:block
，则将其更改回
display:none
。但是，虽然我没有收到任何控制台错误，但if-else语句根本没有按当前状态运行

希望这是另一个我在阅读代码时有点笨的例子


函数脚本（）{
$（'question'）。在（'click'，function（）上{
$（“#常见问题”）.find（“.answer”）.not（$（this））.hide（）；
if（$（this）.next（“.answer”）.css（“display”，“none”））{
$（this.next（“.answer”）.css（“display”，“block”）；
}else if（$（this）.next（“.answer”）.css（“显示”、“块”））{
$（this.next（“.answer”）.css（“display”，“none”）；
};
});
}
$（文档）.ready（脚本）

问题1

答复1

问题2

答复2

问题3

答复3

您的逻辑中有几个问题。首先，您的
if
语句条件使用
css（）
的setter，而不是getter。因此，当它强制jQuery对象返回布尔值时，它将始终返回
true

其次，在执行逻辑之前隐藏所有
.answer
元素，因此即使在更正后，
if
条件也会始终看到
.answer
是
显示：none
，因为您刚刚隐藏了它

第三，您将
$（this）
提供给
not（）
，但是
this
是对
问题的引用，而不是
答案的引用。解决了这些问题后，这项工作将：


函数脚本（）{
$（'.question'）。在（'click'，function（）{
var$answer=$（this.next（'.answer'）；
if（$answer.css（“display”）=“none”）{
$answer.css（“显示”、“块”）；
}否则{
$answer.css（“显示”、“无”）；
};
$（“#常见问题”）.find（“.answer”）.not（$answer.hide（）；
});
}
$（文档）.ready（脚本）

问题1

答复1

问题2

答复2

问题3

答复3

您似乎在使用Jquery，因此最好使用
$（'.answer'）.show（）
或
$（'.answer'）.hide（）
。另外，display:none将应用于所有的类，这就是为什么单击每个问题它会隐藏所有答案的原因。最好在循环中迭代并动态分配类，如-answer-1、answer-2，非常好，谢谢！我曾尝试过涉及toggle（）和hide（）/show（）的解决方案，但由于不断遇到相同的问题，我最终尝试通过使用display属性来显式显示，但没有效果。我正在研究的真实示例还有一些其他元素，它们可以同时进行切换，但我应该能够交叉应用这里使用的逻辑。再次感谢你！