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-наведения и т. Д.).

Я пробовал по-разному, это последний, и я не могу заставить его работать. Может ли кто-нибудь помочь мне с объяснениями и/или учебником. Потому что я сделал google для одного и не мог найти ничего, кроме меню, использующего чистый CSS или JQuery.

спасибо.

Answer 1

first of: Вы должны действительно использовать обработчики событий. Разделение логики с кода (перемещение всех js во внешний файл).

я модифицировал его немного, чтобы отразить возможность (измененный HTML, JS, CSS):

полный код здесь jsFiddle

Самым важным было, чтобы остановить запуск родительские A-теги: ввод функция onclick на ссылке, а не родительский ли.

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

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

    return false; 
}