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-image").indexOf("collapsed.gif") >= 0) {
      mainNode.css("background-image","url('images/expanded.gif')");
    } else {
      mainNode.css("background-image","url('images/collapsed.gif')");
    }
  }
}

 

 

 

其他HTML代碼見附件