提问者:小点点

响应式JS导航菜单


我有这个顶部的导航菜单,如图所示。

下面是我的JS,我目前必须使它响应,以便它打开点击它,但它没有工作:

<script>

            function showMenu(event){

                event.preventDefault();

                let element = document.getElementById('header');

                if(element.classList.contains('active')){
                    element.className = "";
                }
                
                else{
                    element.className = "active";
                }
            }
        </script>

下面是我的标题代码:

 <!--Header-->
    <header id="header">
        <div class="wrapper">
            <a href="/">
                <img src="images/pulse.png" alt="logo">
            </a>

            <button id="submenu">
                <span></span>
                <span></span>
                <span></span>
            </button>


            <!--Menu Links-->
            <ul class="menu-left">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul class="menu-right">
                <li class="menu-cta"><a href="#">Get Started</a></li>
            </ul>
        </div>
    </header>

任何帮助都非常感激。

谢啦!


共1个答案

匿名用户

你可以试试这个

删除它

element.className = "";

替换者

element.classList.remove('active');