jquery - 添加 JQuery 菜单

Question

我有一些现有代码。此代码使用 html 表格作为横幅。代码如下所示:

<table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
    <td id="menu1" class="menu1">&nbsp;</td>
    <td id="menu2" class="menu2">&nbsp;</td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

当用户点击一个单元格时，我需要显示一些与该菜单关联的菜单项。我的问题是我不确定如何让这个菜单结构到位。因为有许多其他 JQuery 组件与这个特定的表相关联，所以我无法在不进行大量工作的情况下将其更改为另一个元素。这排除了 DIV 与 Table 的争论或使用 UL 菜单结构。

谁能告诉我如何获得用户单击菜单时要显示的菜单选项列表？另一项是，我需要在不向下推页面内容的情况下显示菜单项。实际上，我需要将菜单项显示在页面内容的顶部。

感谢您的帮助!

Answer 1

好的，这可能对你有用......

工作示例:http://jsfiddle.net/HDfzt/2/

HTML:

 <table id="banner" cellpadding="0" cellspacing="0" style="width:840px;">
  <tr>
      <td id="menu1" class="menu1">menu1<div><ul class='menu1DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu2" class="menu2">menu2<div><ul class='menu2DropDown'><li>item</li><li>item</li></ul></div></td>
    <td id="menu3" class="menu3">&nbsp;</td>
    <td id="menu4" class="menu4">&nbsp;</td>
    <td id="menu5" class="menu5">&nbsp;</td>
  </tr>
</table>

<div>My page content</div>

CSS:

#banner div {position: relative}
.menu1DropDown {display: none;}
.menu2DropDown {display: none;}

JS:

$("#banner td").hover(function(){
    $("ul", this).toggle("show");
    $("ul", this).css("position","absolute").css("top","0px").css("left","0px");
});