使用無序列表的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菜單插件。 這些有很多。 我對超級魚有相對不錯的經驗。 重新發明這個特殊的輪子沒什么意義。