带有汉堡菜单的导航栏作为打开/关闭按钮答案

【问题标题】：nav bar w/burger menu as open / close button带有汉堡菜单的导航栏作为打开/关闭按钮
【发布时间】：2020-01-11 01:59:32
【问题描述】：

编码新手。

带有动画汉堡菜单的侧导航栏出现问题。导航栏在点击（动画汉堡）时打开和关闭，但它总是推回到着陆部分。如果我打开导航栏并选择#4 部分，应用程序将导航到该部分，但是当我单击关闭导航栏时，它会返回到登陆(first) section。换句话说，我无法关闭导航栏而不被送回登陆(first) section。

使用基本 JS 函数 - classList.toggle

导航部分

    <nav id="mySidebar" class="sidebar">
        <a href="#section1">LANDING SEC 1</a>
        <a href="#section2">SECTION 2</a>
        <a href="#section3">SECTION 3</a>
        <a href="#section4">SECTION 4</a>
        <a href="#section5">SECTION 5</a>
      </nav>

     <a id="nav-toggle" href="#"><span></span></a>

切换部分


let sideBar = document.getElementById("mySidebar");

document.querySelector( "#nav-toggle" )
  .addEventListener( "click", function() {
    this.classList.toggle( "activateAnimation" );
    sideBar.classList.toggle("openNav");

  });

【问题讨论】：

能否展示您的代码示例？
欢迎来到 Stack Overflow。请发布您的代码minimal, working example，以便我们帮助您解决问题。
您可以参考此列表和演示示例以了解您当前的情况：w3schools.com/howto/howto_js_sidenav.asp
嘿！我希望我的 sn-p 有意义。是动画汉堡，它是点击打开关闭的按钮。技术上打开/关闭，但然后总是重新发送到着陆。
如果将#nav-toggle 元素的href 更改为#section2 之类的内容会怎样？它会导航到第 2 部分吗？

标签： javascript html css nav

【解决方案1】：

如果切换按钮触发了不需要的导航事件，则需要跳过 #nav-toggle 链接的默认行为。在这种情况下使用 event.preventDefault() 应该可以工作。

我已修改代码以将event 传递给.addEventListener( 函数，然后使用event.preventDefault() 更新该事件

let sideBar = document.getElementById("mySidebar");

document.querySelector( "#nav-toggle" )
  .addEventListener( "click", function(event) {
     this.classList.toggle( "activateAnimation" );
     sideBar.classList.toggle("openNav");
     event.preventDefault();
});

【讨论】：

【解决方案2】：

感谢您的帮助和建议。罗汉的名单很棒，谢谢！事实证明，我需要添加一行代码来 preventDefault() 阻止浏览器重新路由回登陆部分。 :)

【讨论】：

prevnetDevault() 用于锚标记！