常见问题下拉列表 - 单击时文本颜色已更改

FAQ dropdown- Text color changed when clicked

本文关键字：颜色 文本 下拉列表 单击 常见问题      更新时间：2023-09-26

我正在使用JavaScript下拉菜单来表达我的FAQ，我无法弄清楚的是如何在单击时更改问题的颜色，然后在再次单击时更改回来。

这是 JavaScript：

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

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

如果我

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

例如：

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

并在 CSS 文件中

.your-class {
    color: selected color;
}

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

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

相关文章：