JQUERY学习第二天之制作横纵向导航菜单

$(document).ready(function(){
  //页面中的DOM已经装载完成时，执行的代码
  $(".main > a").click(function(){
    //找到主菜单项对应的子菜单项
    var ulNode = $(this).next("ul");
    /*
    if (ulNode.css("display") == "none") {
      ulNode.css("display","block");
    } else {
      ulNode.css("display","none");
    }
    */
    //ulNode.show("slow");//normal fast
    //ulNode.hide();
    //ulNode.toggle();
    //
    //ulNode.slideDown("slow");
    //ulNode.slideUp;
    ulNode.slideToggle();
    changeIcon($(this));
  });
  $(".hmain").hover(function(){
    $(this).children("ul").slideDown();
    changeIcon($(this).children("a"));
  },function(){
    $(this).children("ul").slideUp();
    changeIcon($(this).children("a"));
  });
});

/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
  if (mainNode) {
    if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {
      mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
    } else {
      mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
    }
  }
}

其他HTML代码见附件

附件：http://down.51cto.com/data/2361406

分享文章：JQUERY学习第二天之制作横纵向导航菜单
网页网址：http://kswjz.com/article/joosii.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

JQUERY学习第二天之制作横纵向导航菜单

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

JQUERY学习第二天之制作横纵向导航菜单

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们