[英]Javascript multi level dropdown menu
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.