jquery 無限級聯選單案例分享_jquery

看到phpcms的地區級聯菜單，感覺寫的挺有意思，就說說大致步驟，省得忘了。

對於地區級聯選單的產生一般是在/data/cache_model/content_form.class.php檔案的areaid()函式中。不過，這個只是一個cache至於什麼地方生成還不找到，所以暫時作為一個測試。 （知道的同學告訴我哈！十分感謝）

在areaid（）的$js中加入

複製程式碼

複製程式碼

複製程式碼


程式碼如下:

function delChild(num)
{
$('#load_$field select').each(function(i,obj){

if (obj.id >num) $('#' obj.id).remove(); }) } 對應的，在/load.php中elseif($field == 'areaid' && $value)修改

複製代碼

代碼如下:



代碼如下:

代碼如下: 代碼如下:

代碼如下: 代碼如下: 代碼如下：$str = 'onchange="delChild('.$id.');$('#'.$value.'') .val(this.value);this.disabled=false;area_load(this.value);">value="1">'.$LANG['please_select'].'' ; 就能去掉"選定地區後不能更改"的效果，並且當沒有下級地名時不會刪除多餘的選擇框。 傳統的級聯選單呢，個人覺得傳輸資料相對較大，而且和資料庫的關聯似乎不好，所以就不貼代碼了。 方法二：複製程式碼 程式碼如下:

腳本>

$(document).ready(function(){
$('.menu li').hover(function(){
$(this ).children('ul').show() ;
$(this).focus().addClass('focusa')
},function(){
$(this).children( 'ul').hide(); $(this).focus().removeClass('focusa');
});
腳本>

ul{ 列表樣式：無；保證金：0；填充：0;}
.menu { 高度：30px;行高：30px； }
.menu li { float:left; position:relative ;} /* 這一級是導航*/
.menu li a { display:block;高度：30px；行高：30px；內邊距：0 20px; }
.menu li a:hover { color:#000;背景：url(img/bg1.png); }
.menu li a.more { background:url(img/there.png) no-repeat 130px center; }
.menu li ul { 位置：絕對；浮動：左；寬度：150px；邊框：1px實心#000; display:none;} /*這是第二層選單*/
.menu li ul a { width:110px; }
.menu li ul a:hover { 背景:url(img/bg1.png);}
.menu li ul ul{ top:0;left:150px;}/*從第三層選單開始,所有的子級選單都相對偏移*/

• 菜單一
  
  
  
  • 菜單一
  
  
  • 選單二
  
  
  • 選單三
  
  
  • 選單四
  
  
  • 選單五
    
    
    
    • 選單一
    
    
    • 選單二
    
    
    • 選單三
    
    
    • 選單四
    
    
    • 選單五
      
      
      
      • 菜單一
      
      
      • 菜單二
      
      
      • 菜單三
      
      
      • 選單四
      
      
      • 選單五
        
        
        
        • 選單一
        
        
        • 選單二
        
        
        • 選單三
        
        
        • 選單四
        
        
        • 選單五
        
        
        
        
      
      
      
      
    
    
    
    
  
  
  
  


• 選單二
  
  
  
  • 選單一
  
  選單二


• 選單三
  
  
  
  • 菜單一
  
  
  • 菜單二
  
  
  • 選單三
    
    
    
    • 選單一
    
    
    • 選單二
    
    
    • 菜單三
    
    
    • 菜單四
    
    
    • 選單五
    
    
    
    
  
  
  • 選單四
  
  
  
  

選單三

選單四

選單五

• 選單一


• 選單二
  
• 選單三