fadeIn下拉菜单重复触发事件
想实现的效果
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'});
});
});问题拓展
顺便想请教一下实现类似这样弹出效果的具体思路，
展开
收起
1
条回答
写回答
写回答
-
IT从业$(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>2019-07-17 19:35:12赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
