使用 JQuery 折叠菜单答案

【问题标题】：Collapsing a Menu with JQuery使用 JQuery 折叠菜单
【发布时间】：2011-02-09 23:12:57
【问题描述】：

我正在处理需要展开和折叠的 JQuery 菜单。但是，我在让子菜单按照我的意愿排列时遇到了一些问题。基本上，我希望子菜单项与顶部菜单项一致。但是，就目前而言，整个子菜单项都是缩进的。我的代码如下所示：

HTML

<ul id="theMenu"> 
  <li><a title="open or close this section" href="#">Info</a>                    
    <ul> 
      <li><a href="#">Basic</a></li> 
      <li><a href="#">Advanced</a></li> 
    </ul> 
  </li> 

  <li><a title="open or close this section" href="#">Documents</a> 
    <ul> 
      <li><a href="#">Newsletters</a></li> 
      <li><a href="#">Policies and Procedures</a></li> 
      <li><a href="#">job Descriptions</a></li> 
    </ul> 
  </li> 
</ul>

JavaScript

$(document).ready(function () {
  $("#theMenu > li > a").not(":first").find("+ ul").slideUp(1);
  $("#theMenu > li > a").click(function () {
    $(this).find("+ ul").slideToggle("fast");
  });
});

CSS

#theMenu, #theMenu ul { list-style:none; width:15em; }
#theMenu a { background:#F6F6F6; color:#010101; 
  display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none; 
  border:1px solid #DFDFDF; 
}
#theMenu ul a { background:#F6F6F6; color:#010101; 
  font-weight:normal; text-decoration:none; 
}
#theMenu ul a:hover { background:#F0EBE1; text-decoration:underline; color:#711515; }

如何使子菜单与根菜单的左边缘齐平？

谢谢！

添加：演示here

【问题讨论】：

我无法复制您的问题：jsfiddle.net/brianflanagan/sH2WJ您使用的是什么浏览器？

标签： jquery css

【解决方案1】：

#theMenu, #theMenu ul { 列表样式：无；宽度：15em； }

在

#theMenu, #theMenu ul { 列表样式：无；宽度：15em；边距：0；填充：0； }

【讨论】：

【解决方案2】：

在 FF 上看起来不错，您使用的是什么浏览器？

【讨论】：