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