JS在li上使用onclick事件显示块

Question

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; 
}

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

Answer 1

Try:

<li onClick="dropDown(this);">

This is important, so your function knows which element you clicked on. Then...

function dropDown(li) {
    var submenu = li.getElementsByTagName('ul')[0];
    if( submenu) {
        submenu.style.display = submenu.style.display == "block" ? "" : "block";
    }
}

This will toggle the visibility of the submenu :)

Answer 2

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/

Answer 3

here is a quick example of what i think you want (provided you can use JQuery):

    $(document).ready(function () {
        $('#dropdown ul li').on('click', function dropdown() {
            //console.getElementById("").style.display = "block";
        });
    });

<div id="dropdown" class="dropdown">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
    </ul>
</div>