RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
JQUERY学习第二天之制作横纵向导航菜单
 
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://cqwzjz.cn/article/joosii.html