使用jquery的多級下拉菜單

Question

我想用jQuery設計一個多級菜單。 我已經寫了一些代碼。你可以看到演示here。 所有這一切正常。但我想動態地製作多級下拉菜單。

腳本

$('ul#menu > li').hover(function(){ 
    //$('#drop' , this).css('display','block'); 
    $('.drop' , this).delay(20).slideDown(200); 
}, function(){ 
$('.drop' , this).delay(20).slideUp(200); 
});​ 

HTML

<ul id="menu"> 
    <li><a href="#">Home</a> 
     <ul class="drop"> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About us</a></li> 
     </ul> 
    </li> 


    <li><a href="#">about</a> 
     <ul class="drop"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
     </ul> 
    </li> 

</ul>​ 

CSS

ul#menu 
{ 
    margin:0; 
    padding:0; 
} 
ul#menu > li 
{ 
    list-style:none; 
    float:left; 
    margin:0; 
    padding:0; 
    position:relative; 
} 
ul#menu a 
{ 
    text-decoration:none; 
    color:#fff; 
    background:red; 
    display:block; 
    padding:10px; 
} 
ul#menu > li ul.drop 
{ 
    margin:0; 
    padding:0; 
    width:150px; 
    position:absolute; 
    display:none; 
} 
ul#menu > li ul.drop ul 
{ 
    margin:0; 
    padding:0; 
    width:150px; 
    position:absolute; 
    display:none; 
    left:150px; 
    top:0; 
} 
ul#menu > li ul li 
{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
}​ 

Answer 1

您需要更改jQuery腳本一點點，以適應多級菜單是這樣的：

$('ul#menu li').hover(function(){ 
    $(this).children('ul').delay(20).slideDown(200); 
}, function(){ 
    $(this).children('ul').delay(20).slideUp(200); 
}); 

，並更改HTML這樣的：

<ul id="menu"> 
    <li><a href="#">Home</a> 
     <ul class="drop"> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">About us</a></li> 
      <li> 
       <a href="#">About us</a> 
       <ul> 
        <li><a href="#">Sub Item 1</a></li> 
        <li> 
         <a href="#">Sub Item 2</a> 
         <ul> 
          <li><a href="#">Sub item 3</a></li> 
          <li><a href="#">Sub item 4</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 


    <li><a href="#">about</a> 
     <ul class="drop"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Home</a></li> 
     </ul> 
    </li> 
</ul> 

你的CSS是罰款。 您可以檢查更新的多級代碼：http://jsfiddle.net/297t6/

Answer 2

$(document).ready(function() { 
      var data = [{ 'Name': 'Home', 'Url': '#', 'SubMenu': [{ 'Name': 'Home1', 'Url': '#' }, { 'Name': 'Home2', 'Url': '#' }, { 'Name': 'Home3', 'Url': '#' }, { 'Name': 'Home4', 'Url': '#' }, ] }, { 'Name': 'AboutUs', 'Url': '#', 'SubMenu': [{ 'Name': 'AboutUs1', 'Url': '#' }, { 'Name': 'AboutUs2', 'Url': '#' }, { 'Name': 'AboutUs3', 'Url': '#' }, { 'Name': 'AboutUs4', 'Url': '#' }, ]}]; 

      if (data.length > 0) { 
       $('body').prepend('<ul id="menu"><ul>'); 

       $.each(data, function (i, entity) { 
        var liHtml = []; 
        liHtml.push('<li><a href="' + entity.Url + '">' + entity.Name + '</a>'); 
        if (entity.SubMenu.length > 0) { 
         liHtml.push('<ul class="drop">'); 
         $.each(entity.SubMenu, function (i, subEntity) { 
          liHtml.push('<li><a href="' + subEntity.Url + '">' + subEntity.Name + '</a>'); 
         }); 
         liHtml.push('</ul>'); 
        } 
        liHtml.push('</li>'); 

        $('ul#menu').append(liHtml.join('')); 
       }); 
      } 



      $('ul#menu > li').hover(function() { 
       //$('#drop' , this).css('display','block'); 
       $('.drop', this).delay(20).slideDown(200); 
      }, function() { 
       $('.drop', this).delay(20).slideUp(200); 
      }); 
     }); 

現場演示中看到此鏈接：http://jsfiddle.net/nanoquantumtech/Z5NXv/