jQuery系列（七）：导航栏实例上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.box {
width: 960px;
/*height: 60px;*/
overflow: hidden;
margin: 0 auto;
js导航栏下拉菜单/*border: 1px solid green;*/
}
.box ul li {
float: left;
/*width: 160px;*/
/*height: 60px;*/
line-height: 60px;
text-align: center;
}
.box ul li a {
text-decoration: none;
display: block;
width: 40px;
height: 60px;
color: #000;
padding: 0 60px;
background-color: yellow;
}
.box .show {
width: 100%;
height: 200px;
position: absolute;
/*background-color: red;*/
top: 60px;
left: 0;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
display: none;
box-shadow: 0 0 5px #777;
}
.box .show.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href=" ">felix⼿机</a>
<div class="show">
<div class="container">
张三
</div>
</div>
</li>
<li>
<a href="#">felix⼿机</a>
<div class="show">
<div class="container">
李四
</div>
</div>
</li>
<li>
<a href="#">felix⼿机</a>
<div class="show">
<div class="container">
王五
</div>
</div>
</li>
<li>
<a href="#">felix⼿机</a>
<div class="show">
<div class="container">
赵六
</div>
</div>
</li>
<li>
<a href="#">felix⼿机</a>
<div class="show">
<div class="container">
武七
</div>
</div>
</li>
<li>
<a href="#">felix⼿机</a>
<div class="show">
<div class="container">
哈哈哈哈
</div>
</div>
</li>
</div>
<script type="text/javascript" src='../jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
// 控制当⿏标第⼀次呼⼊的动画效果
let animated = false;
$('.box>ul>li>a').mouseenter(function (ev) {
// 下⾯代码时⿏标第⼀次滑⼊a标签的动画效果
if (!animated) {
animated = true;
let jQa = $(this);
jQa.css('color', '#F52809');
// next()表⽰当前标签的紧挨着的兄弟标签
$(this).next("div").stop().slideDown(600);
} else {
let jQa = $(this);
// 修改a标签的样式
jQa.css('color', '#F52809').parent('li').siblings('li').children('a').css('color', 'black');
// 切换下⾯显⽰区域的内容
<('div').stop().show().parents('li').siblings('li').children('.show').stop().hide();            }
});
// ⿏标进⼊到下⽅区域，保持不变
$('.show').mouseenter(function (ev) {
$(this).stop().show();
});
/
/ ⿏标离开下⽅区域
$('.show').mouseleave(function (ev) {
$(this).stop().slideUp(300);
animated = false
});
// ⿏标离开导航栏列表
$('.box').mouseleave(function (ev) {
console.log($(ev.target));
$(ev.target).next("div").stop().slideUp(300);
animated = false;
});
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。