点击汉堡菜单没有反应。

Question

当屏幕尺寸小于680像素时，汉堡菜单出现，只有左侧的名称会保留并在点击时展开，这是很好的，就像https://www.w3schools.com/howto/howto_js_topnav_responsive.asp一样。

但是当点击汉堡菜单时，它不起作用。有任何想法是什么出了问题吗？

以下是我的HTML和脚本；

function myFunction2() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  margin: 0;
}
.ad {
    background-color: #fbf4e9;
    text-align: center;
    padding:5px;
}
.sticky {
    position: fixed;
    top: 0;
}
ul.navbar {
    overflow:hidden;
    list-style-type:none;
    background-color:#f9eedd;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:10;
    } 
ul.navbar li a{ 
    display:block;
    color:#8e8275;
    text-decoration:none;
    text-align: center;
    padding: 13px 10px 13px 10px;
    margin: 10px 7px 10px 7px
    }
ul.navbar li.links{ float:left;}

ul.navbar li.icon {  display: none;}
@media screen and (max-width: 680px) {
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.navbar.responsive {position: relative;}
  ul.navbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.navbar.responsive li {
    float:none;
    display:inline;
  }
  ul.navbar.responsive li a {
    display: block;
    text-align: left;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ad">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
  </div> 
   <div>    <ul class="navbar" id=myTopnav>
    <li class="links"><a href=#home>Home</a></li>
      <li class="links"><a></a></li>
    <li class="links"><a href=#talen>Talen</a></li>
    <li class="links"><a href=#genres>Genres</a></li>
    <li class="links"><a href=#stijlen>Stijlen</a></li>   
     <li class=icon><a href="javascript:void(0);" onclick="myFunction()">
    <i class="fa fa-bars"></i>
     </a></li>
    </ul>    </div>

   <p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>

- Laura

Answer 1

问题在于你定义了两次myFunction()。所以第二个将覆盖第一个。

尝试给第二个起一个不同的名称，例如myFunction2()，就应该可以开始工作了。 编辑 我把脚本改成了：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction2()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

试一下：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction2()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

body {
  margin: 0;
}
.ad {
    background-color: #fbf4e9;
    text-align: center;
    padding:5px;
}
.sticky {
    position: fixed;
    top: 0;
}
ul.navbar {
    overflow:hidden;
    list-style-type:none;
    background-color:#f9eedd;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:10;
    } 
ul.navbar li a{ 
    display:block;
    color:#8e8275;
    text-decoration:none;
    text-align: center;
    padding: 13px 10px 13px 10px;
    margin: 10px 7px 10px 7px
    }
ul.navbar li.links{ float:left;}

ul.navbar li.icon {  display: none;}
@media screen and (max-width: 680px) {
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.navbar.responsive {position: relative;}
  ul.navbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.navbar.responsive li {
    float:none;
    display:inline;
  }
  ul.navbar.responsive li a {
    display: block;
    text-align: left;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ad">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
  </div> 
   <div>    <ul class="navbar" id=myTopnav>
    <li class="links"><a href=#home>Home</a></li>
      <li class="links"><a></a></li>
    <li class="links"><a href=#talen>Talen</a></li>
    <li class="links"><a href=#genres>Genres</a></li>
    <li class="links"><a href=#stijlen>Stijlen</a></li>   
     <li class=icon><a href="javascript:void(0);" onclick="myFunction()">
    <i class="fa fa-bars"></i>
     </a></li>
    </ul>    </div>

   <p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>

- T. Short

---

@Laura 请尝试一下我刚刚添加到我的帖子中的代码片段。 - T. Short

你重命名了错误的函数。重命名第二个函数（就像我所做的那样）@Laura - T. Short