javascript - 常见问题下拉列表 - 单击时文本颜色发生变化

Question

我正在为我的常见问题解答使用 JavaScript 下拉菜单，但我不知道如何在单击时更改问题的颜色，然后在再次单击时更改回来。

这是JavaScript：

<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block')
                   ? 'block' : 'none';}
</script>

我知道使用 :action 仅适用于单击问题时，但我正在尝试设置它的样式，以便每次单击都打开或关闭颜色，因为这就是答案下拉时发生的情况，我都喜欢要协调。

Answer 1

如果我理解正确，您切换功能会显示/隐藏答案。然后你所要做的就是获取问题容器并切换一个包含文本颜色的 css 类

例如：

document.getElementById(your question).classList.toggle(your-class);

并在一个css文件中

.your-class {
    color: selected color;
}

Answer 2

如果我理解正确 - 试试这个 CState=document.getElementById("myColor"); CState.onmouseover=function(){this.style.color='red';}; CState.onmouseout=function(){this.style.color='blue';};

Answer 3

<style>
.classStyle1 {background-color:white}
.classStyle2 {background-color:green}
</style>
<script type="text/javascript">
function toggle(Info) {
var CState = document.getElementById(Info);

if(CStage.className == "classStyle1"){
     CStage.className = classStyle2;
}else{
     CStage.className = classStyle1;
}
// or else
// create style attribute for select element and put style='background-color:white' like this 
if(CStage.style.backgroundColor == "white"){
     CStage.style.backgroundColor = 'green';
}else{
     CStage.style.backgroundColor = 'white';
}
</script>