javascript - 使用无序列表的 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>元素，mouseout对于 #home触发，子菜单项隐藏。

我知道这与事件冒泡和 mouseover 有关/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 的体验相对较好.重新发明这个特殊的轮子毫无意义。