JQuery中鼠标划过一级菜单，有二级菜单的就显示的处理

最新推荐文章于 2024-08-09 11:49:58 发布

原创最新推荐文章于 2024-08-09 11:49:58 发布 · 1.7w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML5和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"); 
         });    
    });