javascript - 如何通过单击更改元素的显示属性

Question

我正在开发一个网站并尝试制作一个带有汉堡菜单的移动版本。这个想法是，当点击汉堡时，会出现一个下拉菜单。所以我试图做的是这个

HTML:

    <nav class="mobile">
        <ul>
            <li id="burgericon"><img src="./images/Icons/burgericon.png" alt="icon" onclick="changeDisplay()"></li>
            <li id="mobilecart"><a href="#cart"><img src="./images/Icons/icon_cart.png" alt="cart"></a></li>
                <ul>
                    <li id="dropdown"><a href="#">Store</a></li>
                    <li id="dropdown"><a href="#">About</a></li>
                    <li id="dropdown"><a href="#">Contact</a></li>
                </ul>
        </ul>
    </nav>

CSS:

#burgericon img {
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
    float: left;
    width: 50px;
    height: 50px;
}

#mobilecart img {
    padding-top: 20px;
    padding-right: 20px;
    height: 33px;
    width: 38px;
    float: right;
}

#dropdown {
    display: none;
    text-decoration: none;
    color: black;
    background-color: black;
}

和JS:

function changeDisplay() {
    alert("eys");
    document.getElementbyId("dropdown").style.display = "block";
    }

警报有效，但出于某种原因，它不会将该 ID 的显示更改为阻止而不是无。有任何想法吗？顺便说一句，我还不能使用 jQuery。

Answer 1

请注意此行区分大小写: document.getElementById(注意大写的 B)。

html

 <ul id="ul">
        <li ><a href="#">Store</a></li>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Contact</a></li>
 </ul>

js

 document.getElementById("ul").style.display = "block";