单击时汉堡菜单不起作用答案

【问题标题】：The hamburger menu doesn't work when clicked on单击时汉堡菜单不起作用
【发布时间】：2019-12-29 11:51:32
【问题描述】：

当屏幕小于680px时，会出现汉堡菜单，点击时只有左边的名字，这很好，就像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>

【问题讨论】：

标签： html css navbar responsive sticky

【解决方案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>

【讨论】：

@Laura 试试我刚刚添加到帖子中的代码 sn-p
您重命名了错误的函数。重命名第二个（就像我所做的那样）@Laura

【解决方案2】：

我个人认为你过于复杂了。我查看了您开始的 W3Schools.com 示例，并使用响应式移动下拉菜单重新编写了它。这是我个人做的方式，或者我猜是我做的方式。另外，如果我要继续这样做，我会在栏的左侧添加一个主页图标。

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          rel="stylesheet" />
    <style>
        body {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: -webkit-sticky;
            /* Safari */
            position: sticky;
            top: 0;
            left: 0;
        }

        li {
            float: left;
        }

        .right {
            display: none;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }

        .mblMenu {
            width: 100%;
            height: auto;
            background-color: #333;
            display: none;
        }

        .show{
            display: block !important;
        }

        button {
            width: 50%;
            margin: 8px 25% !important;
            border: 2px solid #4B4;
            color: #4B4;
            font-size: 28px;
            background-color: #000;
            padding: 0;
            margin: 0;
        }

        @media only screen and (max-width: 700px) {
            ul li:not(:first-child){
                display: none;
            }
            .right {
                color: #4B4;
                margin: 0 12px 0 0;
                padding: 8px;
                display: block;
                float: right;
            }
        }

    </style>
</head>

<body>

    <div class="header">
        <h2>Scroll Down</h2>
        <p>Scroll down to see the sticky effect.</p>
    </div>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" >Contact</a></li>
       <i class="fa fa-bars fa-2x right" onclick="mblMenu()"></i>
    </ul>
    <div id="mblMenu" class="mblMenu">
        <button onclick="go2('home')">Home</button>
        <button onclick="go2('about')">About</button>
        <button onclick="go2('contact')">Contact</button>
    </div>

    <script type="text/javascript">
        function mblMenu(){
            let mblMenu = document.getElementById('mblMenu');
            mblMenu.classList.toggle('show');
        }
        function go2(url){
            window.location = url;
        }
    </script>

    <h3>Sticky Navigation Bar Example</h3>
    <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
    <p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky
        positioning. Safari requires a -webkit- prefix.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>

</body>

</html>

【讨论】：