实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现的二级导航</title>
<style>
body{
margin:0;
}
ul,li{
margin:0;
padding: 0;
list-style: none;
}
a{
color: #999999;
text-decoration: none;
}
a:hover{
color: red;
}
.nav{
height: 40px;
width: 600px;
background-color: #E3E4E5;
margin:20px auto;
}
.main-menu{
margin:0 15px;
}
.main-menu li{
float:left;
line-height: 40px;
padding:0 15px;
position: relative;
}
.hover {
background-color: #efefef;
}
.sub_menu{
display: none;
background-color: #efefef;
position: absolute;
left: 0;
top:40px;
width: 260px;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="main-menu">
<li><a href="">我的订单</a></li>
<li><a href="">我的京东</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">待处理订单</a></li>
<li><a href="">我的问答</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">降价商品</a></li>
<li><a href="">我的关注</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">企业采购</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">企业订购</a></li>
<li><a href="">商用场景馆</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">工业品</a></li>
<li><a href="">礼品卡</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
var ul = document.querySelector('ul');
var sub_menu = document.querySelectorAll(".sub_menu");
var ulc = ul.children;
for (var i=0;i<ulc.length;i++){
ulc[i].addEventListener('mouseover',function () {
this.classList.add('hover');
this.lastElementChild.classList.add('show');
},false);
ulc[i].addEventListener('mouseout',function () {
this.classList.remove('hover');
this.lastElementChild.classList.remove('show');
},false)
}
</script>
</body>
</html运行实例 »
点击 "运行实例" 按钮查看在线实例
上面的是for 循环写的
下面是用foreach写的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>foreach实现的二级导航</title>
<style>
body{
margin:0;
}
ul,li{
margin:0;
padding: 0;
list-style: none;
}
a{
color: #999999;
text-decoration: none;
}
a:hover{
color: red;
}
.nav{
height: 40px;
width: 600px;
background-color: #E3E4E5;
margin:20px auto;
}
.main-menu{
margin:0 15px;
}
.main-menu li{
float:left;
line-height: 40px;
padding:0 15px;
position: relative;
}
.main-menu li:hover{
background-color: #efefef;
}
.sub_menu{
display: none;
background-color: #efefef;
position: absolute;
left: 0;
top:40px;
width: 260px;
}
.active{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="main-menu">
<li><a href="">我的订单</a></li>
<li><a href="">我的京东</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">待处理订单</a></li>
<li><a href="">我的问答</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">降价商品</a></li>
<li><a href="">我的关注</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">企业采购</a>
<ul class="sub_menu">
<li>
<ul>
<li><a href="">企业订购</a></li>
<li><a href="">商用场景馆</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="">工业品</a></li>
<li><a href="">礼品卡</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
var ul =document.querySelector('.main-menu');
// 伪数组转换成数组
// var array = [].slice.call(ul.children);
// 伪数组转换成数组,这个是es6的用法
var array = Array.from(ul.children);
// 注册事件
array.forEach(function (item) {
item.addEventListener('mouseover',show,false);
item.addEventListener('mouseout',show,false);
});
function show(ev) {
// lastElementChild就是子栏目
this.lastElementChild.classList.toggle('active')
}
</script>
</body>
</html运行实例 »
点击 "运行实例" 按钮查看在线实例
这次作业发现了this=currentTarget,也就是事件的绑定者，target是事件的触发者。