个人中心
gpt4 book ai didi

javascript - getElementById() 如何恢复悬停

转载 作者：行者123 更新时间：2023-12-02 15:45:01 25 4
gpt4 key购买 nike

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

HTML

    <!DOCTYPE html>

<html>
    <head>
        <!-- metadata -->
        <meta charset="UTF-8">
        <meta name="keywords" content="bvdh webdesign, beverwijk, heemskerk, uitgeest, ijmuiden, velsen, noord holland, noord-holland, nederland, responsive webdesign, website bouwen, goedkoop, kwaliteit, betrouwbaar">
        <meta name="viewport" content="width=device-width user-scalable=no">
        <!-- [/] metadata -->

    <!-- . -->

        <!-- links -->
        <link rel="shortcut icon" href="afb/favicon.png" type="image/x-icon">
        <link rel="icon" href="afb/favicon.png" type="image/x-icon">
        <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <!-- [/] links -->

    <!-- . -->

        <!-- script -->
        <script src="js/action.js"></script>
        <!-- [/] script -->

    <!-- . -->

        <title>BvdH Webdesign</title>
    </head>

<!-- . -->

    <body>

        <!-- omhuller -->
        <div class="omhuller">

            <!-- .......... -->
            <!-- MENU POPUP -->
            <!-- .......... -->

                <!-- menu-ag -->
                <div id="menu-ag" onclick="submenuUit(); return false;">

                </div>
                <!-- / menu-ag -->




                <!-- menu-vg -->
                <nav id="menu-vg">

                    <!-- submenu -->
                    <ul class="submenu">

                        <li class="submenu-sluitknop">

                            <a href="#" onclick="return false;" class="deco-tekst"><span class="fa fa-times-circle" onclick="submenuUit(); return false;"></span></a>

                        </li>




                        <li>

                            <a href="diensten/templates/index.html" class="deco-tekst">templates</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">huisstijl op maat</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">advies op maat</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">logo ontwerp</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">budget website</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">familie website</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">snelservice</a>

                        </li>

                    </ul>
                    <!-- / submenu -->

                </nav>
                <!-- [/] menu-vg -->

            <!-- ../........... -->
            <!-- [/] MENU POPUP -->
            <!-- /............. -->




            <!-- hoofd-header -->
            <header id="hoofdheader">

                <!-- logo -->
                <div id="logo">
                    <img src="afb/logo.png">
                </div>
                <!-- / logo -->




                <!-- hoofdnavigatie -->
                <nav id="hoofdnavigatie">

                    <ul>

                        <li>

                            <a href="#" onclick="toggleSubmenu(); return false;" class="deco-tekst" id="toggle-actief">diensten</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">over Bas</a>

                        </li>




                        <li>

                            <a href="#" onclick="return false;" class="deco-tekst">contact</a>

                        </li>

                    </ul>

                </nav>
                <!-- / hoofdnavigatie -->

            </header>
            <!-- / hoofd-header -->




            <!-- inhoud -->
            <section class="inhoud opvaltekst">

                <h1  class="deco-tekst">Investeer in de toekomst</h1>

            </section>
            <!-- / inhoud -->

        </div>
        <!-- / omhuller -->

    </body>
</html>

JS

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";
}

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

最佳答案

您可以添加一个名为 active 的新类，将颜色设置为 #222，然后在切换菜单时添加/删除该类。请参阅http://codepen.io/anon/pen/PPYaWP

关于javascript - getElementById() 如何恢复悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32272149/

25 4 0
文章推荐： python - 错误 : nothing to repeat at position 0 using regex in python
文章推荐： c# - 将 SQL Server Serilog 接收器包装在 Async 中是否有意义？
文章推荐： perl - 如何从 Perl 数组中获取哈希值？
文章推荐： asp.net - ASP.NET 应用程序中什么消耗了超过 65% 的时间？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com