0

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

你可以在这个小提琴中看到演示。

基本上，它采用如下所示的 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菜单标题（标记为）mouseover/mouseout。h2

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

4

1 回答 1

0

哈……你永远猜不到问题出在哪里。我需要在“ul”元素上设置背景颜色。我猜 IE7 不会将透明背景视为元素框的一部分，至少就鼠标悬停而言。现在我不得不为我的菜单元素选择明确的背景颜色。多么拖沓！

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

于 2013-01-09T01:59:42.460 回答