Svelte响应菜单在窄屏幕上不显示垂直项目

Question

当我在本地建造它时...

水平菜单项在桌面设置中工作，当宽度小于600px时，除了第一个以外的所有菜单项。 i必须更改MyFunction函数，以便当我按下汉堡菜单时，正确添加和删除了响应类。

，无论如何，当我按下它时，菜单项根本不会显示（垂直或其他方式）。 我创建了一个简单的

SveltePlayground

，并且主要以类似的方式工作，尽管按下汉堡菜单会刷新页面，这可能是由于标签所致。

在这里是代码...

<div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div> 
    <a href="#about">About</a>
    <a href="#" class="icon" onclick={(event) => myFunction()}>&#9776</a>
</div>

<script>
    /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
    function myFunction() {
        const topnav = document.getElementById("myTopnav");
        if (topnav.classList.contains("responsive")) {
            topnav.classList.remove("responsive"); // Collapse menu
        } else {
            topnav.classList.add("responsive"); // Expand menu
        }
        console.log(topnav.className);
    }

    /* not using this now as didn't add class*/
    function OriginalMyFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
</script>

<style>
    .topnav {
        overflow: hidden;
        background-color: #333;
    }

    .topnav a {
              font-size: 17px;
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .active {
        background-color: #04AA6D;
        color: white;
    }

    .topnav .icon {
        display: none;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
              font-size: 17px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        float: none;
        color: black;
        padding: 14px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .topnav a:hover, .dropdown:hover .dropbtn {
        background-color: #555;
        color: white;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
        color: black;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    @media screen and (max-width: 600px) {
        .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
        }
            .topnav a.icon {
                float: right;
                display: block;
        }
    }

    @media screen and (max-width: 600px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
        .topnav.responsive .dropdown {float: none;}
        .topnav.responsive .dropdown-content {position: relative;}
        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
    }

html的线与onclick有一些问题。它缺少引号，缺少a；它也有错误的语法来调用

myFunction

改变这一行，以下，您的汉堡菜单将起作用。

<a href="#" class="icon" onclick="myFunction(event)">&#9776;</a>

Answer 1