Jquery縦メニュー実現

最初のメニューは、メニュー項目をクリックして対応するサブメニュー項目を表示し、三角が下の三角に変わります.次のメニューマウスはメニュー項目に移動して対応するサブメニュー項目を表示し、マウスはサブメニューを移動して消えます.
コードセクションについて説明します.
htmlコード:
ヘッダーコードセクションにタイトルと参照を追加するには、次の手順に従います.

body はメニュー の を し、ネストされたulとliで され、メニューの はulであり、1 の メインメニューはliの に かれている.サブメニューがあれば、このメインメニューのliに しいulを し、 にネストすれば のメニューを できます.

 
    
 
      
 
             1 
        
 
          
 
                11 
          
 
          
 
                12 
          
 
        
 
      
 
      
 
           2 
        
 
          
 
                21 
          
 
          
 
                22 
          
 
        
 
      
 
      
 
           3 
        
 
          
 
              31 
          
 
          
 
                32 
          
 
        
 
      
 
    
 
     
    
 
    
 
      
 
           1 
        
 
          
 
                11 
          
 
          
 
                12 
          
 
        
 
      
 
      
 
           2 
        
 
          
 
                21 
          
 
          
 
                22 
          
 
        
 
      
 
      
 
           3 
        
 
          
 
              31 
          
 
          
 
                32 
          
 
        
 
      
 
    
 
     
   

cssコード 1.ブラウザのulとli のデフォルトでは、テキストの にドット があり、li にはインデントがあります.List-styleプロパティ はnoneで、ulとliの の さな をクリアできます.3.インデント をクリアします.paddingもmarginも0です.ここで、IE 6 IE 7はmarginを0にする がある にインデント をクリアできます.

ul,li{ 
  list-style:none;/* //  ul li        */ 
 
} 
ul{ 
  /*           */ 
  padding:0; 
  margin:0; 
} 
.main,.hmain{ 
  background-image:url(../images/title.gif);/*     */ 
  background-repeat:repeat-x; 
  width:120px; 
} 
li{ 
  background-color:#EEEEEE; 
} 
a { 
  /*        */ 
  text-decoration:none; 
  padding-left:20px;  
   display:block; 
  display:inline-block;/*   ie6       */  
  width:100px; 
  padding-top:3px; 
  padding-bottom:3px; 
} 
.main a,.hmain a { 
  color:white;/*          */ 
  background-image:url(../images/collapsed.gif); 
  background-repeat:no-repeat; 
  background-position:3px center; /*         */ 
} 
.main li a ,.hmain li a{ 
  /*      */ 
  color:black; 
  background-image:none;/*       */ 
  padding-left:18px;  
   
} 
.main ul,.hmain ul{ 
  /*       */ 
   display:none;  
} 
.hmain{ 
  float:left;/*    */ 
  margin:1px; 
} 

menu.jsコード:1.main aが して しました.mainというclassの の のすべてのaノード2.main>a .mainサブノードのaノード

$(document).ready(function(){ 
  //   Dom       ，      
   $(".main > a,.hmain a").click(function(){ 
     //              
    var ulNode = $(this).next("ul"); 
    // //         
    // if(ulNode=$.css("display") == "none"){ 
      // ulNode.css("display","block"); 
    // }else{ 
      // ulNode.css("display","none"); 
    // } 
     
    // ulNode.show("normal");//       ，   nomal,slow,fast 
    // ulNode.hide(); 
     // ulNode.toggle();//toggle         
    //    ，       
    // ulNode.slideDown(); 
    // ulNode.slideUp; 
    ulNode.slideToggle(); 
  }); 
  //      
  // $(".hmain > a").hover(function(){ 
    // $(this).next("ul").slideDown(); 
  // }.Function(){ 
    // var ulNode=$(this).next("ul"); 
    // var timeoutId =setTimeout(function(){ 
     
// })     
      // ulNode.slideUp(); 
  // },300); 
  // ulNode.hover(function(){ 
    // clearTimeout(timeoutId); 
  // }.function(){ 
    // $(this).slideUp(); 
  // }); 
 
  /********                    *****/ 
   
  $(".hmain").hover(function(){ 
    $(this).children("ul").slideDown(); 
  },function(){ 
    $(this).children("ul").slideUp(); 
  }); 
   
}); 
  /* 
  *                      
  * 
  */ 
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')"); 
    } 
  } 
} 
 

が のすべてであり、より いメニュー を することを んでいます.