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>

我知道使用：动作只会在点击问题时起作用，但我正在尝试设置它以便每次点击都可以打开或关闭颜色，因为这就是回答下降的情况，我d喜欢两者协调。

Answer 1

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

例如：

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

并在css文件中

.your-class {
    color: selected color;
}

Answer 2

<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>

Answer 3

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

FAQ下拉列表 - 单击时文本颜色已更改

3 个答案: