当我收缩窗口并单击汉堡包图标时，什么都没有显示

Question

When I shrink the window to mobile size and click the hamburger/drop down icon, the rest of the menu is supposed to show. 当我将窗口缩小到移动尺寸并单击汉堡包/下拉图标时，菜单的其余部分应该显示出来。 But it's not responding to my javascript dropdownmenu function(). 但是它没有响应我的javascript dropdownmenu function（）。 Nothing is showing up. 什么都没有出现。 Here is my complete code. 这是我完整的代码。 Please help me. 请帮我。

Basically in my HTML code, I created a navigation bar. 基本上，在我的HTML代码中，我创建了一个导航栏。 On regular windows page all menu item shows up except the dropdown icon. 在常规Windows页面上，除下拉图标外，所有菜单项都会显示。 When I shrink the size, only first menu item shows up ("Home") and a hamburger drop down icon shows up. 缩小尺寸时，仅显示第一个菜单项（“主页”），并且显示一个汉堡下拉菜单。 I use a javascript function DropDownMenu which runs when the browser detects a click on the hambuger icon, which is supposed to drop down the rest of the menu items, but does not. 我使用了JavaScript函数DropDownMenu，当浏览器检测到对hambuger图标的单击时运行该JavaScript函数，该图标应该会删除其余菜单项，但不会删除。

HTML: 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: 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

Change this line: 更改此行：

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

on correct version: 在正确的版本上：

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

当我收缩窗口并单击汉堡包图标时，什么都没有显示

问题描述

1 个解决方案

解决方案1
1 2017-10-31 23:56:25

当我收缩窗口并单击汉堡包图标时，什么都没有显示

问题描述

1 个解决方案

解决方案1 1 2017-10-31 23:56:25

解决方案1
1 2017-10-31 23:56:25