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会触发，子菜单项会隐藏。< / p>

我知道这与事件冒泡和鼠标悬停/鼠标移动有关，但我无法弄清楚当光标在整个<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有过相对较好的体验。重新发明这个特殊的轮子没什么意义。

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

1 个答案: