的Javascript多層次的下拉菜單

Question

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懸停propery等）使多級下拉菜單。

我嘗試了很多方法，這是最後一個，我無法使它工作。有人可以幫我解釋和/或教程。因爲我做了一個谷歌，找不到任何東西，除了使用純CSS或JQuery的菜單。

謝謝。

Answer 1

第一個：你應該真的使用事件處理程序。將邏輯與代碼分離（將所有js移動到外部文件中）。

我已經修改了它一下，以反映可能性（改變HTML，JS，CSS）：這裏

全碼jsFiddle

最重要的是，要停止觸發父標籤：將鏈接上的onclick函數，而不是它的父李。

function dropDown(a) { 
    var li = a.parentElement, 
     submenu = li.getElementsByTagName('ul')[0]; 

    submenu.style.display = submenu.style.display == "block" ? "none" : "block"; 

    return false; 
}