Question

关于javascript，我是一个完整的初学者，我碰到了砖墙。

我在W3学校中找到了有关如何创建动画汉堡菜单的少量代码，它看起来很酷，而且我设法将其链接到我的侧边菜单，因此它成功打开了它。按钮不会关闭菜单。

我通过在第一个div容器中的onclick函数中添加; openSlideMenu（）来链接自己的侧菜单。

我尝试通过在同一个容器中使用; 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/

预先感谢，如果我错过任何重要的事情，我深感抱歉。

Answer 1

打开和关闭按钮是some按钮。因此您需要在点击（打开/关闭）按钮时切换菜单：

<div class="burger-menu-btn" onclick="myFunction(this); toogleSlideMenu(this);">
    <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 toogleSlideMenu(x){
       if(x.classList.contains('change')){
          document.getElementById('burger-menu').style.width = '100%';
       }
       else{
          document.getElementById('burger-menu').style.width = '0px';
       }
    }

</script>

https://jsfiddle.net/esa1vn0j/1/

Answer 2

按照您的方法（在其中设置width的方式），我将创建一个函数toggleSideMenu，其中：

检查元素的宽度是否已经为100%。
如果没有，请将其设置为100%。
否则，将其设置为0px。

示例：

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

<script>
  function toggleSideMenu(x) {
    const el = document.getElementById('burger-menu')
    el.style.width = el.style.width === '100%' ? '0px' : '100%'
  }
</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>
  <!--  "btn-close" here is my old way of closing this menu, i am not happy with it at all.
  which is why i want to close this menu, with the same button that opens it above-->
  <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a> 
</div>

但是实际上，如果我是你，我只会使用名为.opened的类进行切换。

Answer 3

您可以切换类（例如开放类），然后在CSS中设置“＃burger-menu”的宽度，而不用单击“汉堡”图标时更改“＃burger-menu”元素的宽度。

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

点击功能：

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

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

如何使用同一按钮打开和关闭汉堡菜单？

3 个答案: