菜单，有二级菜单的就显示的处理"/>
JQuery中鼠标划过一级菜单，有二级菜单的就显示的处理
重点是逻辑，理解了就好了。先直接上html5代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标划过一级菜单，有二级菜单的就显示</title>
<script src="../js/jquery-2.2.3.js"></script>
<script>$(function() {$("li:has(ul)").hover(function() {$(this).find("a:first").css("background-color","#eee");$(this).find(".nav2").css("display","block"); },function() {$(this).find("a:first").css("background-color","#fff");$(this).find(".nav2").css("display","none"); }); });
</script>
</head><body>
<ul id="nav"> <li><a>首页</a></li><li><a>新闻中心</a><ul class="nav2"> <li><a>国内新闻</a></li><li><a>国外新闻</a></li></ul></li><li><a>产品中心</a><ul class="nav2"> <li><a>优惠产品</a></li><li><a>团购产品</a></li> </ul></li> <li><a>联系我们</a></li> </ul>
</body>
</html>
特别要注意理解：
$(function() {$("li:has(ul)").hover(function() {$(this).find("a:first").css("background-color","#eee");$(this).find(".nav2").css("display","block"); },function() {$(this).find("a:first").css("background-color","#fff");$(this).find(".nav2").css("display","none"); }); });按照顺序原则执行的代码。注意hover悬浮时引起的效果即可。
好吧。今天到这里。越努力，越幸运。
更多推荐
JQuery中鼠标划过一级菜单,有二级菜单的就显示的处理
发布评论