JS在li上使用onclick事件来显示块 [英] JS using onclick event on li to display block

问题描述

HTML:

<script>function dropdown()
{        console.getElementById("").style.display="block";
}</script>
<div id="dropdown">
    <ul>
        <li onclick="dropdown()"><a>Menu</a>
             <ul id="Menuitems">
                 <li><a href="">item 1</a> </li>
                 <li><a href="">item 2</a> </li>
                 <li><a href="">item 3</a> </li>
            </ul>
        </li>
    </ul>
</div>    

Css:

#dropdown ul{
 display: block; 
}
#dropdown ul li {
     display: block;
     background-color: #558c89;
     color: #ffffff; 
}
#dropdown ul li ul {
     display: none; 
}
#dropdown ul li:hover > ul { /*this is what the onclick event should do*/
     display: block; 
}

onclick应该启动功能"dropdown()"，该功能需要:"display:block;"在#dropdown ul li

The onclick should start the function "dropdown()" which needs to: "display: block;" on #dropdown ul li

推荐答案

您缺少列表ID，而是在控制台上调用选择器(当您想在文档上选择时).

You're missing the list ID and you're calling the selector on the console (when you want to be selecting on the document).

<script>
function dropdown()
{        
    document.getElementById("Menuitems").style.display="block";
}
</script>
<div id="dropdown">
    <ul>
        <li onclick="dropdown()"><a>Menu</a>
             <ul id="Menuitems">
                 <li><a href="">item 1</a> </li>
                 <li><a href="">item 2</a> </li>
                 <li><a href="">item 3</a> </li>
            </ul>
        </li>
    </ul>
</div>  

JSFiddle: http://jsfiddle.net/tmaB9/

JSFiddle: http://jsfiddle.net/tmaB9/

这篇关于JS在li上使用onclick事件来显示块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！