자바 스크립트 멀티 레벨 드롭 다운 메뉴

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; 

} 

자바 스크립트 코드 :

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 hover propery 등을 사용하지 않고)를 사용하여 다중 레벨 드롭 다운 메뉴를 만들고 싶습니다.

여러 가지 방법으로 시도했습니다. 이것이 마지막 사항이며 작동하지 않습니다. 누군가가 설명이나 튜토리얼로 나를 도울 수 있습니까? 왜냐하면 나는 하나의 구글 않았다 순수한 CSS 또는 JQuery를 사용하여 메뉴를 제외하고 아무것도 찾을 수 없습니다.

감사합니다.

Answer 1

첫 번째 : 실제로 이벤트 핸들러를 사용해야합니다. 논리를 코드에서 분리 (모든 j를 외부 파일로 이동). 나는 가능성을 반영하기 위해 그것을 약간 수정 한

(변경된 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; 
}