Javascript多级下拉菜单

Javascript multi level dropdown menu

本文关键字：下拉菜单 多级 Javascript      更新时间：2023-09-26

HTML代码：

<ul class="nav-menu">   
<li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#" >Birds</a>
    <ul class="menu">
        <li id="no2" ><a href="#" onmouseover="dropDown2()" onmouseout="reverseDropDown2()">Ratites</a>
                <ul class="submenu">
        <li><a href="">Ratites</a></li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
        </li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
</li>
    <li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#">Dogs</a>
    <ul class="menu">
        <li><a href="">Big</a></li>
        <li><a href="">Red</a></li>
        <li><a href="">Noizy</a></li>
    </ul>
</li>

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;
}
.submenu{
    position: absolute;
    top:0px;
    left:70px;
    background: #ccc;
    display: none;
}

Javascript代码：

 function dropDown() {
var submenu = document.getElementById('no').getElementsByClassName('menu')[0];

    submenu.style.display="block";
}

function reverseDropDown(){
  var submenu = document.getElementById('no').getElementsByClassName('menu')[0];
    submenu.style.display="none";
}
 function dropDown2() {
    var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];

        submenu.style.display="block";
    }
function reverseDropDown2(){
  var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];
    submenu.style.display="none";
}

JSFiddle：http://jsfiddle.net/wkmd7h0r/33/

我想使用javascript制作一个多级下拉菜单（没有像jquery这样的库，也没有使用css悬停属性等）。

我已经尝试了很多方法，这是最后一种，但我无法让它发挥作用。有人能帮我做解释和/或辅导吗。因为我在谷歌上搜索了一个，除了使用纯CSS或JQuery的菜单外，什么都找不到。

谢谢。

首先：您应该真正使用事件处理程序。将逻辑与代码分离（将所有js移动到外部文件中）。

我对它进行了一些修改，以反映一种可能性（更改了HTML、JS、CSS）：

完整代码在这里jsFiddle

最重要的是，停止触发父A标签：将onclick函数放在链接上，而不是它的父li

function dropDown(a) {
    var li = a.parentElement,
        submenu = li.getElementsByTagName('ul')[0];
    submenu.style.display = submenu.style.display == "block" ? "none" : "block";
    return false;
}
相关文章：