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

onclick应该启动“dropdown（）”函数，该函数需要：“display：block;”在#dropdown ul li

Answer 1

尝试：

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

这很重要，因此您的函数知道您点击了哪个元素。然后...

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

这将切换子菜单的可见性：）

Answer 2

您错过了列表ID，并且您正在控制台上调用选择器（当您想要选择文档时）。

<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

这是我想你想要的一个简单例子（假设你可以使用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>

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

3 个答案: