單擊時漢堡菜單不起作用

Question

當屏幕小於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>

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>

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