使用无序列表的 jQuery 下拉导航

Question

我正在尝试使用 jQuery 制作一个如下所示的导航下拉菜单：

<ul id="home" >
    <li class="navtab"><a href="#">TABANME</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
    <li class="homesub"><a href="#">Some link</a></li>
</ul>

<li> .navtab 始终可见 - 子菜单项一开始是隐藏的。我已将 .hover() 附加到 <ul> 元素 (#home)，但是当光标进入子菜单 <li> 元素时，#home 的 mouseout 会触发，并且子菜单项会隐藏。

我知道这与事件冒泡和鼠标悬停/鼠标移出有关，但我无法弄清楚当光标位于整个 <ul> 上时如何保持菜单打开的逻辑。我目前拥有的 jQuery 是：

    $('#thome').hover(
        function(){
           tabShowSubnav($(this).attr('id'))
        },
        function(){
           tabHideSubnav($(this).attr('id'))
        });

function tabShowSubnav(menu){

var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';

$(tb).css('height','239px');
$(sb).show();
}

有什么建议吗？

Answer 1

帮自己一个大忙，改变你的菜单标记结构：

<ul id="home" >
  <li class="navtab">
    <a href="#">TABANME</a>
    <ul class="submenu">
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
      <li><a href="#">Some link</a></li>
    </ul>
  </li>
</ul>

并将悬停事件放在 li.navtab 上以使子菜单可见。您会发现这样做要容易得多。例如，CSS：

ul.submenu { display: none; }

与：

$(function() {
  $("li.navtab").hover(function() {
    $(this).children("ul.submenu").show();
  }, function() {
    $(this).children("ul.submenu").hide();
  });
});

而且你已经完成了大部分任务。

话虽如此，我强烈建议使用现有的 jQuery 菜单插件。有很多关于这些的。我对superfish 有过比较好的经验。重新发明这个特殊的轮子没有什么意义。