今天給大家分享一種用JS寫的導航欄，雖然我們工作中不會使用JS來做導航欄，為了練習我們用JS來做一個JS導航欄
這種方法要比其他方法程式碼量少很多，但是需要對事件冒泡有一定的理解，如果需要理解冒泡可以參考一下，
該註釋的地方我都給大家註釋上了
思路：給所有的 li 加上 滑鼠移入事件當滑鼠移入時會觸發事件，由於事件的冒泡機制，每次二級導航欄裡的事件觸發時同時會觸發父級 li 的事件
除錯時可以用e.stopPropagation()阻止事件冒泡來看看冒泡和不冒泡的區別
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
/* 一級導航樣式 */
#nav{
width:100%;
height: 40px;
background: #000;
}
#nav>li{
float: left;
position: relative;
}
#nav>li>a{
float: left;
width: 80px;
height: 40px;
color: #fff;
text-decoration: none;
line-height: 40px;
text-align: center;
}
#nav li>.active{
background: yellow;
}
#nav>li>ul>li>.active{
background: red;
}
#nav>li>ul{
width: 100px;
background: #000;
position: absolute;
left: 0;
top: 40px;
display: none;
}
#nav>li>ul>li>a{
text-decoration: none;
color: #fff;
line-height: 30px;
text-align: center;
width: 100px;
height: 30px;
display: block;
}
</style>
</head>
<body>
<ul id=”nav”>
<li>
<a href=”##”>首頁</a>
<ul >
<li><a href=”##”>首頁1</a></li>
<li><a href=”##”>首頁1</a></li>
<li><a href=”##”>首頁1</a></li>
<li><a href=”##”>首頁1</a></li>
<li><a href=”##”>首頁1</a></li>
</ul>
</li>
<li>
<a href=”##”>文件</a>
<ul>
<li><a href=”##”>文件1</a></li>
<li><a href=”##”>文件1</a></li>
<li><a href=”##”>文件1</a></li>
<li><a href=”##”>文件1</a></li>
<li><a href=”##”>文件1</a></li>
</ul>
</li>
<li>
<a href=”##”>我的</a>
<ul>
<li><a href=”##”>我的1</a></li>
<li><a href=”##”>我的1</a></li>
<li><a href=”##”>我的1</a></li>
<li><a href=”##”>我的1</a></li>
<li><a href=”##”>我的1</a></li>
</ul>
</li>
</ul>
</body>
</html>
<script>
//先獲取父級元素
var oNav = document.getElementById(“nav”);
//獲取導航欄中所有的li
var aLi = oNav.querySelectorAll(“li”);
//滑鼠移入二級導航出現
for(var i=0;i<aLi.length;i++){
//給每一個li新增一個滑鼠移入事件(主要應用冒泡的原理，但是效率可能有點低)
aLi[i].onmouseover = function() {
//給a標籤新增active
var a = this.children[0];
a.className =”active”;
//將二級導航顯示
//獲取ul 判斷是否存在ul，若存在則顯示ul
var ul = this.children[1];
if(ul){
ul.style.display = “block”;}
//e.stopPropagation()在此將事件冒泡阻止試試
}
//滑鼠移出的時候將a標籤的顏色移除
aLi[i].onmouseout = function() {
//給a標籤去除active
var a = this.children[0];
a.className =””;
//將二級導航隱藏
var ul = this.children[1];
if(ul){ // if（ul）表示存在ul這個東西
ul.style.display = “none”;
console.log(111);
}
}
}
</script>