实现下拉菜单的动画

最新推荐文章于 2022-12-22 00:02:10 发布

转载最新推荐文章于 2022-12-22 00:02:10 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/loveMis/p/9016865.html

本文介绍了一种使用jQuery实现的下拉菜单动画效果。通过监听鼠标悬停事件，根据不同目标元素的类名，动态控制菜单项的显示与隐藏，实现了菜单项的滑动展开与折叠效果。

function donghua(){
        $( '.dropdown-menu span' ).hover(//添加事件，对class dropdown-menu下的span加hover
        function(event){
            console.log(event.target.className);
            if(event.target.className == "aa"){//进行判断
                $(".dropdown").children('.aa_6').slideUp(20);//隐藏
                $(".dropdown").children('.aa_5').slideUp(20);//隐藏
                $(".dropdown").children('.aa_4').slideDown(20);//显示
            }else if(event.target.className == "cc"){
                $(".dropdown").children('.aa_6').slideUp(20);//隐藏
                $(".dropdown").children('.aa_4').slideUp(20);//隐藏
                $(".dropdown").children('.aa_5').slideDown(20);//显示
            }else if(event.target.className == "dd"){
                $(".dropdown").children('.aa_4').slideUp(20);//隐藏
                $(".dropdown").children('.aa_5').slideUp(20);//隐藏
                $(".dropdown").children('.aa_6').slideDown(20);//显示
            }else{
                $(".dropdown").children('.sub-menu').slideUp(20);//隐藏
            }                
        }
    );
}