时间戳

首页 > 解决方案 > 如何使用相同的按钮打开和关闭我的汉堡菜单？

javascript - 如何使用相同的按钮打开和关闭我的汉堡菜单？

问题描述

当谈到 javascript 时，我是一个完整的初学者，而且我已经碰壁了。

我在 W3 学校发现了一小段关于如何创建动画汉堡菜单的代码，看起来很酷，我已经成功地将它链接到我的侧边菜单，所以它成功地打开了它.. 但是同一个按钮不会关闭菜单。

我设法通过将 ;openSlideMenu() 添加到第一个 div 容器中的 onclick 函数来链接我的侧边菜单。

我尝试通过在同一个容器中使用 ;closeSlideMenu() 添加关闭功能，但没有任何运气，我认为为什么这不起作用是因为 div 容器的名称“burger-menu-btn”更改为“burger-menu- btn change" 当您单击它时，因为切换功能会告诉它这样做。

<!-- Burger menu icon and animation -->
    <div class="burger-menu-btn" onclick="myFunction(this); openSlideMenu();">
        <div class="burger-menu-bar-1"></div>
        <div class="burger-menu-bar-2"></div>
        <div class="burger-menu-bar-3"></div>
    </div>

    <script>
        function myFunction(x) {
            x.classList.toggle("change");
        }

        function openSlideMenu(){
            document.getElementById('burger-menu').style.width = '100%';
        }

        function closeSlideMenu(){
            document.getElementById('burger-menu').style.width = '0px';
        }
    </script>

    <div id="burger-menu" class="side-nav">
        <a href="index.html">Home</a>
        <a href="cases.html">Basic // GF2 </a>
        <a href="#">Null</a>
        <a href="#" >Null</a>
        <a href="#">Null</a>
        <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a> 
    </div>

我的最终目标是：

使红色的“burger-menu-btn”打开滑块“burger-menu”，它已经这样做了。

然后使红色转换后的 X 关闭相同的滑块菜单。

所以我最终会得到一个好看的汉堡菜单，那是动画，我终于可以删除导航栏底部的临时“btn-close”按钮。

这是小提琴 https://jsfiddle.net/02rqy16f/

提前谢谢，如果我错过了任何重要的事情，我很抱歉。

标签： javascript

解决方案

单击汉堡图标时，无需更改“#burger-menu”元素的宽度，您可以切换类（例如打开类），然后在css中设置“#burger-menu”的宽度。

#burger-menu{
  width: 0%;
}
#burger-menu.open{
  width: 100%;
}

点击功能：

  document.getElementById('burger-menu').classList.toggle("open");

演示：https ://jsfiddle.net/viet_solution/n8hxqavg

推荐阅读