2014-11-06 156 views
1

HTML代碼:的Javascript多層次的下拉菜單

<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的菜單。

謝謝。

+0

...爲什麼你不想使用CSS懸停? – 2014-11-06 16:58:42

+0

你的小提琴在Firefox中工作嗎?你想要做什麼更多? – 2014-11-06 16:58:43

+0

@JoeSwindell它無法正常工作。例如,如果您在第二個鏈接「狗」上移動鼠標,它將不會顯示正確的子菜單。和子菜單一樣也很麻煩。 – Codemon 2014-11-06 17:08:05

回答

2

第一個:你應該真的使用事件處理程序。將邏輯與代碼分離(將所有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; 
} 
+0

請問你爲什麼要返回'假'? – Codemon 2014-11-06 17:12:21

+0

停止觸發鏈接的默認行爲,使其忽略「href」的內容。實際上onclick必須返回'false' - 我只是傳遞它。 – BananaAcid 2014-11-06 17:14:19