jQuery技术

jquery学习笔记之JQ下拉菜单

字号+ 作者:H5之家 来源:H5之家 2017-02-04 13:02 我要评论( )

下拉菜单是企业网站开发中常用的到的东西,下面我介绍一个基于jquery实现的下拉菜单效果,这是我这个JS菜鸟最近才开始学习,以前一直要搞个下拉菜单,现在学了点J

//两个参数,一个导航ul标签的id,一个是下拉菜单的显示速度,越小越快
function zvMenu(ulElementId,speed){
    //JQ一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
    $("#"+ulElementId).children("li:has(ul)").hover(
        function(){
            $(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式,此处非必要
            $(this).children("ul").slideDown(speed);//JQ的slideDown方法,显示下拉菜单
        },
        function(){
            $(this).children("ul").hide();//隐藏下拉菜单
        }
    );
    //JQ动画,可选
    $("#"+ulElementId).find("li>ul>li>a").hover(
        function(){
            $(this).animate({paddingLeft:"30px"},speed);
        },
        function(){
            $(this).animate({paddingLeft:"20px"},speed);
        }
    );
 
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Jquery easyui入门教程(1)

    Jquery easyui入门教程(1)

    2017-01-23 12:01

  • photoshopCS5实战视频教程

    photoshopCS5实战视频教程

    2017-01-22 14:00

  • 网页设计视频教程-响应式手机网站制作05-jQuery Mobile-传智播客网页平面UI设计学院.zip

    网页设计视频教程-响应式手机网站制作05-jQuery Mobile-传智播客网页

    2017-01-19 18:00

  • jquery json 数组 删除的相关文章,教程,源码

    jquery json 数组 删除的相关文章,教程,源码

    2017-01-19 11:05

网友点评