如何製作jQuery滑動菜單的子菜單？

Question

有沒有辦法讓子菜單滑動側菜單？ JS Fiddle demo

<ul id="nav"> 
     <li><a href="#">Menu Item 1</a></li> 
      <ul id="submenu"> 
       <li><a href="#">Submenu Item 1</a></li> 
       <li><a href="#">Submenu Item 2</a></li> 
      </ul> 
     <li><a href="#">Menu Item 2</a></li> 
    </ul> 

Answer 1

Fiddle DEMO

更改的標記

加入ul代替li作爲ul不能直接包含ul

<div id="menu"> 
    <ul> 
     <li><a href="#">Menu Item 1</a> 

      <ul id="submenu"> <!-- added ul instead of li --> 
       <li><a href="#">Submenu Item 1</a> 

       </li> 
       <li><a href="#">Submenu Item 2</a> 

       </li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Item 2</a> 

     </li> 
     <li><a href="#">Menu Item 3</a> 

     </li> 
    </ul> 
</div> 
<div id="right"> 
    <button type="button" id="button">Menu</button> 
</div> 

個

JS

$('#menu li:has("ul")').children('ul').hide(); //hide submenu 
$('#button').toggle(
function() { 
    $('#right').animate({ 
     left: 150 
    }); 
}, 
function() { 
    $('#right').animate({ 
     left: 0 
    }); 
}); 
$('#menu li:has("ul")').click(function(){ 
    $(this).children('ul').slideToggle(); //toggle submenu 
}); 

參考

.slideToggle()

:has()