JS写的二级导航栏（利用冒泡原理）
程序员文章站
2022-10-04 22:31:33
今天给大家分享一种用JS写的导航栏，虽然我们工作中不会使用JS来做导航栏，为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多，但是需要对事件冒泡有一定的理解，如果需要理解冒泡可以参考一下， 该注释的地方我都给大家注释上了 思路：给所有的 li 加上 鼠标移入事件当鼠标移入时会触发 ......
今天给大家分享一种用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>
上一篇： AI零基础五步临摹简单可爱MBE风格的火焰渐变图标教程
下一篇： 程序员晋级CTO之路的8大准则