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

最新推荐文章于 2021-06-26 11:00:46 发布

这条路黑到底

最新推荐文章于 2021-06-26 11:00:46 发布

阅读量1.7w

点赞数 5

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/chaplinlong/article/details/51165847

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

重点是逻辑，理解了就好了。先直接上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"); 
         });    
    });