Question

我正在开发一个将格式化的HTML转换为动态菜单的小脚本。这样做是为了允许表单编写者在不知道很多JavaScript的情况下创建动态菜单。我们的想法是，他们只会编写语义标记，而javascript代码将为他们制作菜单。

您可以在this fiddle中看到演示。

基本上，它需要HTML，如下所示：

<ul data-menu-horizontal="true" data-menu-width="500px">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
      <ul data-menu-horizontal="true" datamenu-header="Sub-Menu 1" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <ul data-menu-vertical="true" data-menu-header="Sub-Menu 2" data-menu-width="500px">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

...并将其转换为：

<ul id="13575820577141" class="menu-horizontal" style="width: 500px;">
   <li><a href="index.html">Home</a></li>
   <li><a href="index.html">Blog</a></li>
   <li><a href="index.html">News</a></li>
   <li><a href="index.html">Code</a></li>
   <li>
          <h2 class="menu-horizontal-header">Sub-Menu 1</h2>
      <ul id="13575820577142" class="menu-horizontal" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>     
   <li>
      <h2 class="menu-vertical-header">Sub-Menu 2</h2>
      <ul id="13575820577143" class="menu-vertical" style="display: none; position: absolute; width: 500px;">
         <li><a href="index.html">Home</a></li>
         <li><a href="index.html">Computer Blog</a></li>
         <li><a href="index.html">More News</a></li>
      </ul>
   </li>
</ul>

有jQuery（从makeMenus()函数开始）为每个菜单分配显示/隐藏功能ul和菜单标题（标记为h2）mouseover / mouseout显示/隐藏适当的子菜单。

显示/隐藏功能在我到目前为止测试的所有浏览器中都很有效。问题是在IE7中，“鼠标悬停”功能在遇到任何空格时都会中断，即使在li个元素之间也是如此。我不想简单地删除所有额外的空格，因为需要一些空格来“美化”菜单。

Answer 1

哈哈......你永远不会猜到问题是什么。我需要在'ul'元素上设置背景颜色。我猜IE7不会将透明背景视为元素框的一部分，至少就鼠标悬停而言。现在我被迫为菜单元素选择明确的背景颜色。多么拖累！

感谢所有看过的人。希望这可以在将来帮助其他人。

IE7动态菜单和空白

1 个答案: