如何使用jQuery创建多级下拉菜单？

问题描述：

在我的网站，我可以创建1级子菜单，它的工作。但2级子菜单不起作用。请帮忙。如何使用jQuery创建多级下拉菜单？

这是我的HTML代码

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#"> Menu2&nbsp; <img alt="" src="Images/warning.png" style=" border:0px;" /></a> 
     <ul id="subnav"> 
      <li><a href="#">SubMenu1</a></li> 
       <ul> 
         <li><a href="#">Sub1Sub2menu1</a></li> 
         <li><a href="#">Sub1Sub2menu2</a></li> 
         <li><a href="#">Sub1Sub2menu3</a></li> 
       </ul> 
      <li><a href="#">SubMenu2</a></li> 
      <li><a href="#">SubMenu3</a></li> 
      <li><a href="#">SubMenu4</a></li> 
      <li><a href="#">SubMenu5</a></li> 
      <li><a href="#">SubMenu6</a></li> 
      <li><a href="#">SubMenu7</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Menu3&nbsp; <img alt="" src="Images/warning.png" style=" border:0px;" /></a> 
    <ul> 
     <li><a href="#">Sub1Menu1</a></li> 
     <li><a href="#">Sub1Menu2</a></li> 
    </ul>   
    </li> 
    <li><a href="#">Menu4</a></li> 
    <li><a href="#">Menu5</a></li> 
</ul>

，这是我的CSS：

#nav 
{ 
    margin:0; padding:0; list-style:none; width:640px; height:37px; 
} 

#nav li 
{ 
    float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none; 
} 

#nav li a 
{ 
    display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000; 

} 

#nav li a:hover 
{ 
    color:Green; 
} 

#nav a.selected 
{ 
    color:#000; 
} 

#nav ul 
{ 
    position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc; border: solid 1px #c5c9cc; 
    -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; 
} 


#nav ul li 
{ 
    width:124px; float:right; 
} 

#nav ul ul 
{ 
    width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0 0 10px; 
} 

#nav ul a 
{ 
    display:block; height:30px; color:#000; line-height:30px; text-decoration:none; 

} 

#nav li ul ul { 
margin:0px 124px 0 10px; 
} 


#nav ul a:hover 
{ 
    text-decoration:none; 
} 

*html #nav ul 
{ 
    margin:0 0 0 -2px; 
}

这是我的jQuery代码：

<script type="text/javascript"> 
     $(document).ready(function() { 

      $('#nav li').hover(
       function() { 
        //show its submenu 
        $('ul', this).slideDown(200); 
        $('#subnav ul', this).css({ visibility: "hidden" }); 
       }, 
       function() { 
        //hide its submenu 
        $('ul', this).slideUp(200); 
       } 
      ); 

     $('#subnav').hover(
       function() { 
        //show its submenu 
        $('#subnav ul', this).css({ visibility: "visible" }); 
        $('#subnav ul', this).slideDown(200); 
       }, 
       function() { 
        //hide its submenu 
        $('#subnav ul', this).slideUp(200); 
       } 
      ); 
     }); 
    </script>

我假设你创造这个教育目的。我的意思是认真的，我们是否需要另一个dropdowndownmenu，当时已经有600万：http://www.google.co.uk/#hl=zh-CN&xhr=t&q=jquery+dropdown+menu – 2011-05-16 07:59:01

我查了200-300多个网站来自谷歌。但我找不到我的答案。 – 2011-05-16 10:26:34

答

这似乎是你的第二个层次是没有嵌套在第一级。它应该是在第一级的<li></li>

<li><a href="#">SubMenu1</a> 
    <ul> 
     <li><a href="#">Sub1Sub2menu1</a></li> 
     <li><a href="#">Sub1Sub2menu2</a></li> 
     <li><a href="#">Sub1Sub2menu3</a></li> 
    </ul> 
</li>

谢谢..它的工作.. – 2011-05-16 08:03:58

答

试试这个HTML代码

<ul> 
<li style="display: inline !important;"><a href="#">Home</a></li> 
<li class="parent"><a href="#">Menu 1</a> 
    <ul class="child"> 
     <li class="parent"><a href="#">Menu 1 child 1</a> 
      <ul class="child"> 
       <li class="parent"><a href="#">sub child 1</a> 
        <ul class="child"> 
         <li>sub child 1</li> 
         <li>sub child 1</li> 
         <li>sub child 1</li> 
        </ul> 
       </li> 
       <li>sub child 1</li> 
       <li>sub child 1</li> 
      </ul> 
     </li> 
     <li class="parent">Menu 1 child 2 
      <ul class="child"> 
       <li>sub child 1</li> 
       <li>sub child 1</li> 
       <li>sub child 1</li> 
      </ul> 
     </li> 
     <li>Menu 1 child 3</li> 
     <li>Menu 1 child 4</li> 
    </ul> 
</li> 
<li><a href="#">Menu 2</a></li>

使用此HTML代码。您注意到<ul><li>嵌套。复制jQuery代码。

jQuery(document).ready(function($){ 
    $('.parent').hover(function(){ 
     $(this).find('ul.child').show(); 
     $(this).find('ul.child').find('ul.child').hide(); 
    }, function(){ 
     $(this).find('.child').hide(); 
     }); 
});

对不起，但我不能提交此评论，如果我添加的CSS代码。只需访问这个网站获取更多信息。希望这有助于。 http://nextopics.com/jquery-multi-level-menu/或看演示http://nextopics.com/others/dropdown-menu/

如何使用jQuery创建多级下拉菜单？

相关推荐