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与表辩论或使用UL菜单结构。

当有人点击菜单时，有人能告诉我如何获取要显示的菜单选项列表吗？另一项是，我需要在不推送页面内容的情况下显示菜单项。实际上，我需要将菜单项显示在页面内容的顶部。

感谢您的帮助！

Answer 1

向主/子菜单添加定位。将孩子隐藏在LOAD，并在悬停/点击等时显示

#menu1, #menu2 { position:relative...}
#sub1, #sub2 { position:absolute, display:hidden...}

$('#menu1').hover(function() {
    $('#sub1').fadeIn().css('top','xxx'); //show the sub, and position it
} function() {
    $('#sub1').fadeOut().css('top','xxx'); //hide it again
}
});

Answer 2

嘿，查看这个网站http://www.stunicholls.com/ ... 我从这里学到了很多关于jQuery菜单和其他的知识。而且，我建议你应该使用

    `<ul>
        <li><a href="..">menu1</a></li>
        <li><a href="..">menu2</a></li>
        ...
    </ul>`

希望有所帮助

Answer 3

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

工作示例：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");
});

添加JQuery菜单

3 个答案: