javascript - 导航栏 - 为 ul 制作动画

Question

我想制作一个带有子菜单的导航栏，单击时会滑出。

所以我想在单击另一个无序列表项时为无序列表设置动画。

所以我在想:(不包括 CSS)

<ul id="menu">
  <li id="filemenu">File</li>
  <li id="reportmenu">Reports</li>
  <li id="toolsmenu">Tools</li>
  <li id="helpmenu">Help</li>
</ul>

<div class="fileSubmenu">
  <ul class = "fileSubmenu sm">
   <li>New</li>
   <li>Open</li>
   <li>Copy</li>
   <li>Print Setup</li>
   <li>Exit</li>
  </ul>
</div>

jquery:

   $(document).ready(function () {
      $("#filemenu").click(function () {
           $(".fileSubmenu").animate({left:'50px'});
      });
  });

所以我认为整个第二个列表会向右滑动，但事实并非如此。

专家有何建议？

基本结构http://jsfiddle.net/zLCWW/2/

Answer 1

试试这个:

$(document).ready(function () {
   $("#filemenu").click(function () {
        $("div.fileSubmenu").animate({paddingLeft:'50px'});
   });
});

因为使用 left- 属性，您只能修改 position:relative 或 position:absolute 的元素。