单击时汉堡菜单不起作用

Question

When the screen gets smaller than 680px , the hamburger menu does appear, and only the name at the left stays when clicked on, which is good, just as on https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

But when the hamburger menu is clicked on, it doesn't work. Any idea what is wrong?

My html and the scripts;

 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>

Answer 1

The problem is that you have defined myFunction() twice. So the second one is overriding the first one.

Try giving the second one a different name such as myFunction2() and it should start to work.

EDIT

I changed the script to:

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");
  }
}

Try it out:

 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>

Answer 2

Personally I think you are over complicating it. I looked at the W3Schools.com example that your started from, and re-wrote it with a responsive mobile drop down. This is the way I would do it personally, or I guess the way I did do it. Also if I were going to keep going on it, I would add a home icon on the left side of the bar.

<!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>