想实现的效果
fadeIn()实现弹出下拉菜单,下拉菜单里实现鼠标覆盖二级栏目样式变化的效果。
出现的问题
具体见此网站
鼠标在二级菜单列表上移动时不停闪动。
据我猜测,每次触发二级栏目样式变化都会再次触发fadeIn()效果,因为在二级栏目上快速移动鼠标就不会那么明显
js代码
$(document).ready(function () {
//一级栏效果
$(".navListLi").mouseover(function(){
$(this).css({'background-color':'#ffffff'});
$(this).children().css({'color':'#00A3ED'});
$(this).children().eq(1).fadeIn();
});
$(".navListLi").mouseout(function(){
$(this).css({'background-color':'#00A3ED'});
$(this).children().css({'color':'#ffffff'});
$(this).children().eq(1).stop();//停止当前正在运行的动画
$(this).children().eq(1).hide();
});
//二级栏目效果
$(".navChildLi").mouseover(function(){
$(this).css({'background-color':'#00A3ED'});
$(this).children().css({'color':'#ffffff'});
});
$(".navChildLi").mouseout(function(){
$(this).css({'background-color':'#ffffff'});
$(this).children().css({'color':'#00A3ED'});
});
});
问题拓展
顺便想请教一下实现类似这样弹出效果的具体思路,
$(document).ready(function () {
//一级栏效果
$(".navListLi a").mouseover(function(){
$(this).css({'background-color':'#ffffff'}).find("ul").fadeIn(200).find("a").css({'color':'#00A3ED'});
});
function hide_nav(){
$(“.navListLi ul”).css({'background-color':'#00A3ED'}).stop(1,1).hide().find("a").css({'color':'#ffffff'});
}
$(".navListLi a").bind("mouseleave","hide_nav()");
$(".navListLi ul").bind("mouseleave","hide_nav()");
//二级栏目效果
//二级菜单使用CSS实现,请看下面
});
.navChildLi a{
background-color:white;
color:#00A3ED
}
.navChildLi a:hover{
background-color:#00A3ED;
color:white
}
补充更新:
大致的意思就是子菜单的弹出要依靠li中的a触发;收回二级菜单依靠触发其他一级菜单的a或者鼠标leave二级菜单;大致就是这个意思;下面是个完整的例子~PO主测试的时候别忘了引入JQ~
<html>
<head>
<style>
body{
margin:0;
background:gray;
}
nav{
display: block;
background:white;
height:3em;
}
ul,li{
display: block;
padding:0;
margin:0;
list-style:none;
}
nav a{
display: block;
font-size:1em;
line-height:3em;
padding:0 1em;
}
nav a:link,nav a:visited{
color:DarkCyan;
background:transparent;
text-decoration:none;
}
nav a:hover,nav a:active{
color:white;
background-color:DarkCyan;
text-decoration:none;
}
li{
background-color: white;
}
li.main_nav{
float:left;
position: relative;
padding:0 2em;
}
li.main_nav ul{
display: none;
position: absolute;
}
</style>
</head>
<body>
<nav>
<ul>
<li class="main_nav">
<a href="">TEST1</a>
</li>
<li class="main_nav">
<a href="">TEST2</a>
<ul>
<li><a href="">TEST2_1</a></li>
<li><a href="">TEST2_2</a></li>
<li><a href="">TEST2_3</a></li>
<li><a href="">TEST2_4</a></li>
</ul>
</li>
<li class="main_nav">
<a href="">TEST3</a>
<ul>
<li><a href="">TEST3_1</a></li>
<li><a href="">TEST3_2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script src="./jquery-1.12.3.min.js"></script>
<script>
$(function(){
$('.main_nav>a').mouseenter(call_out);
function call_out(event){
root = $(event.target);
$('.main_nav ul').stop().hide(50);
root.siblings('ul').stop().fadeIn(200);
}
$('.main_nav ul').mouseleave(call_in);
function call_in(event){
root = $(event.target);
$('.main_nav ul').stop().fadeOut(200);
}
})
</script>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。