使用CSS的jQuery垂直滑出菜单

Question

我编写了一个垂直菜单，其中sub-items在鼠标悬停在父级上时显示。 的HTML结构是：

<ul id="nav"> 
    <li><a href="#">Continents</a> 
     <ul> 
      <li><a href="#">Europe</a> 
       <ul> 
        <li><a href="#">A</a></li> 
        <li><a href="#">B</a></li> 
        <li><a href="#">C</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Asia</a> 
       <ul> 
        <li><a href="#">A</a></li> 
        <li><a href="#">B</a></li> 
        <li><a href="#">C</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Africa</a> 
       <ul> 
        <li><a href="#">A</a></li> 
        <li><a href="#">B</a></li> 
        <li><a href="#">C</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Places</a> 
     <ul> 
      <li><a href="#">Place1</a></li> 
      <li><a href="#">Place2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Oceans</a> 
     <ul> 
      <li><a href="#">Pacific</a></li> 
      <li><a href="#">Atlantic</a></li> 
     </ul> 
    </li> 
</ul> 

最初仅nav li元件被示出。但是，当用户悬停在nav li a上时，会显示连续的子元素。我在initial li元素下只有一个ul时成功完成此操作。但是[如你在上面的HTML结构中看到的]，我需要在第一个li分支中嵌套第二个嵌套的ul。

我的JavaScript代码是：

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('#nav > li > a').hover(function(){ 
        if ($(this).attr('class') != 'active'){ 
         $('#nav li ul').slideUp(); 
         $(this).next().slideToggle(); 
         $('#nav li a').removeClass('active'); 
         $(this).addClass('active'); 
        } 
       }); 
      });   
     </script> 

Answer 1

你rquire这种输出：http://jsfiddle.net/uNKvu/

$('#nav li').hover(function() { 
    $('> ul',this).slideToggle(); 
});