使用javascript的简单下拉菜单

Question

我是javascript的新手，我似乎无法让这个简单的下拉菜单工作。这是我到目前为止所做的：

Html代码：

    <ul>    
        <li onClick='showMenu()'>
            <a href="#" >Birds</a>
            <ul class="menu">
                <li><a href="">Ratites</a></li>
                <li><a href="">Fowl</a></li>
                <li><a href="">Neoaves</a></li>
            </ul>
        </li>
   </ul>

CSS代码：

a {
    color: #06c;
}

ul {
    padding: 0;
    margin: 0;
    background: pink;
    float: left;
}

li {
    float: left;
    display: inline;
    position: relative;
    width: 150px;
    list-style: none;
}

.menu {
    position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}

Javascript代码：

 function showMenu(){
       document.getElementByClass("menu").style.display="block";
 }

我的javascript代码无效。点击后为什么我的嵌套列表不显示？ 这是我的代码的jsfiddle链接：http://jsfiddle.net/wkmd7h0r/13/

Answer 1

getElementsByClassName而非getElementByClass。固定代码：

function showMenu() {
     document.getElementsByClassName("menu")[0].style.display = "block";
}

同样getElementsByClassName返回NodeList集合，因此您应该使用[0]来获取此集合中的第一个元素。

演示：http://jsfiddle.net/wkmd7h0r/14/

以下是addEventListener更高级功能的example。