Javascript getElementById（）如何恢复悬停_Javascript

Javascript getElementById（）如何恢复悬停

javascript

Javascript getElementById（）如何恢复悬停,javascript,Javascript,在我的代码中，当你点击一个菜单按钮时，我有一个弹出菜单。单击时，我希望单击的菜单按钮保持悬停状态/颜色（#222）。再次单击时，弹出窗口将消失，我希望按钮恢复。但我不知道怎么做。我试着用“切换激活”来做这是我现在拥有的代码。（问题只是“切换激活”） HTML 如果某个地方已经有了anwser，我就没有找到它。请告诉我它在哪里，这样就不会有双重问题。您不能在CSS中将“auto”设置为颜色。将其更改为颜色值，它应该会更改。下面是一个HTML示例，如果您只想更改颜色，而不必担心其他HTML元素的

在我的代码中，当你点击一个菜单按钮时，我有一个弹出菜单。单击时，我希望单击的菜单按钮保持悬停状态/颜色（#222）。再次单击时，弹出窗口将消失，我希望按钮恢复。但我不知道怎么做。我试着用“切换激活”来做这是我现在拥有的代码。（问题只是“切换激活”）

HTML

如果某个地方已经有了anwser，我就没有找到它。请告诉我它在哪里，这样就不会有双重问题。

您不能在CSS中将“auto”设置为颜色。将其更改为颜色值，它应该会更改。下面是一个HTML示例，如果您只想更改颜色，而不必担心其他HTML元素的状态：

<html>
<head>
    <script type = 'text/javascript'>
        function toggleSubmenu() {
            if (document.getElementById('toggle-active').style.color != "red") {   
                document.getElementById('toggle-active').style.color = "red";
            }    
            else {                                                                          
                document.getElementById('toggle-active').style.color = 'blue';
            }
        }
    </script>
</head>
<body>
    <button id = 'toggle-active' onclick='toggleSubmenu()'>Test Button</button>
</body>


函数切换子菜单（）{
if（document.getElementById（'toggle-active'）.style.color！=“red”）{
document.getElementById（'toggle-active'）.style.color=“红色”；
}    
否则{
document.getElementById（'toggle-active'）。style.color='blue'；
}
}
测试按钮

您可以添加一个名为

active

的新类，该类将颜色设置为

#222

，然后在切换菜单时添加/删除该类。请参见

document.getElementById连续10次为同一元素调用时，我的眼睛会流血。var mf=document.getElementById（'menu-front'）；然后使用变量mf。这里没有足够的代码来理解你在做什么，你能放一些完整的HTML吗？可能是重复的谢谢你的提示！这是一个很棒的主意，代码也少了很多。我没有从Hacketo获得awnser，无论如何，谢谢；）是的，我确实有一个色码。但是在点击关闭弹出窗口后，以前的悬停不再起作用了。不，悬停仍然消失了。它只需单击一下即可更改样式，然后一直保持该样式，直到您重新选择为止。它似乎适合我。确保添加

！重要信息

至

中的颜色：#222
以确保其覆盖中的颜色：#666666
。另外，删除toggleSubmenu（）
@BasMJ中设置toggleactief的style.color
的行。另外，确保添加d=document.getElementById（“toggleactief”）；d、 className=d.className.substring（0，d.className.length-7）子菜单（）。
function toggleSubmenu()
{
  if (document.getElementById('menu-vg').style.display != "block")  //eerste keer klikken: Als je div NIET block is, dan maakt deze het blok. Functie is afgelopen.
  { 
document.getElementById('menu-vg').style.display = "block";
document.getElementById('menu-vg').style.zIndex = "999";
document.getElementById('menu-ag').style.display = "block";
document.getElementById('menu-ag').style.zIndex = "999";
document.getElementById('toggle-actief').style.color = "#222";
  }

  else
  {                                                                                                 //tweede keer klikken: Bovenstaande is niet van toepassing, aangezien de div bij de eerste klik blok is gemaakt. Nu wordt
document.getElementById('menu-vg').style.display = "none";        //het hier weer "display: none" gemaakt.
document.getElementById('menu-vg').style.zIndex = "auto";
document.getElementById('menu-ag').style.display = "none";
document.getElementById('menu-ag').style.zIndex = "auto";
document.getElementById('toggle-actief').style.color = "#666666";
  }
}

function submenuUit()                                                                        //wanneer er op de achtergrond wordt geklikt sluit het menu
{
document.getElementById('menu-vg').style.display = "none";
document.getElementById('menu-vg').style.zIndex = "auto";
document.getElementById('menu-ag').style.display = "none";
document.getElementById('menu-ag').style.zIndex = "auto";
}

<html>
<head>
    <script type = 'text/javascript'>
        function toggleSubmenu() {
            if (document.getElementById('toggle-active').style.color != "red") {   
                document.getElementById('toggle-active').style.color = "red";
            }    
            else {                                                                          
                document.getElementById('toggle-active').style.color = 'blue';
            }
        }
    </script>
</head>
<body>
    <button id = 'toggle-active' onclick='toggleSubmenu()'>Test Button</button>
</body>