Question

当我将窗口缩小到移动尺寸并单击汉堡包/下拉图标时，应该显示菜单的其余部分。但它没有响应我的javascript dropdownmenu函数（）。什么都没有出现。这是我的完整代码。请帮帮我。

基本上在我的HTML代码中，我创建了一个导航栏。在常规窗口页面上，除下拉图标外，所有菜单项都会显示。缩小尺寸时，只显示第一个菜单项（“主页”），并显示汉堡包下拉图标。我使用了一个javascript函数DropDownMenu，它在浏览器检测到hambuger图标点击时运行，该图标应该是下拉菜单项的其余部分，但不是。

HTML：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <nav>
        <ul class="navmenu" id="dropdownClick">
            <li><a href=“#home”>Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="topnav-right"><a href="#signin">Sign In</a></li>
            <li class="topnav-right"><a href="#signup">Sign Up</a></li>
            <li class="dropdownIcon"><a href="javascript:void(0);" 
onclick="dropdownMenu()"></a>&#9776;</li>
        </ul>
    </nav>

<script>
    function dropdownMenu(){
        var x = document.getElementById("dropdownClick");
        if(x.className === "navmenu"){
             x.className += " responsive"; 
        }else{
            x.className = "navmenu";
        }
    }
</script>

CSS：

/*****************DEFAULTS******************/
html{
    font-family: "Helvetica Neue", sans-serif;
}

nav, header, footer{
    display:block;
}

body{
    line-height: 1;
    margin:0;
}

/*****************NAV BAR******************/


ul.navmenu{
    background-color:aliceblue;
    font-size:14px;
    overflow:hidden;
    margin:0;
    padding:0;
}

ul.navmenu li{ 
    display: block;
    padding:12px;
    float:left;
}

ul.navmenu li:hover{
    background-color:aqua;
}

ul.navmenu li a{
    text-transform: uppercase;
    text-decoration:none;
    min-height:16px;
    color:gray
}

ul.navmenu li.topnav-right{
    float:right;
}

ul.navmenu li.dropdownIcon{
    display:none;
}

/*****************MOBILE******************/
@media only screen and (max-width: 680px){
    ul.navmenu li:not(:nth-child(1)){
        display:none;
    }
    ul.navmenu li.dropdownIcon{
        display:block;
        float: right;
    }

    ul.navmenu.responsive li.dropdownIcon{
        position:absolute;
        top:0;
        left:0;
    }
    ul.navmenu.responsive{
        position: relative;
    }
    ul.navmenu.responsive li{
        display:inline;
        float:none;
    }
    ul.navmenu.responsive li a{
        display: block;
    }

}

Answer 1

更改此行：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()"></a>&#9776;</li>

正确版本：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()">&#9776;</a></li>

当我缩小窗口并点击汉堡包图标时，什么都没有显示出来

1 个答案: