jQuery悬停菜单不会消失

Question

编辑：请参阅此处的操作：http://jsbin.com/emobi/5 - 这是使用mouseenter/mouseleave。

我有一个基本菜单，使用一些嵌套的UL，这是我认为很标准的。当从“根”菜单悬停在LI上时，我想要显示该LI内的UL。移动鼠标或关闭另一个LI，它会显示该子菜单。向下移动到子菜单，并将其悬停在每个元素上方。我有一个简单的jQuery.hover（）集，但后来遇到了问题。当在一个页面上，“根”菜单项被赋予一类'当前页'，如果该类存在，我希望它在鼠标移出后静态显示该子菜单。

希望我解释得不错。我只是抛出一个变量进入悬停函数，所以在mouseout上它在当前页面的子菜单上运行.show（）。简单。除了当我在子菜单的各个LI之间移动鼠标时，它将切换回当前页子菜单。所以我试图在这里添加一个基于another question的计时器元素。这使事情变得更糟 - 现在子菜单不会消失。

这是我的CSS，标记和JS ......我该如何正确地工作？

标记：

<div id="menu"> 
<div id="navbar"> 
    <ul id="firstmenu"> 
     <li> 
      <a href="http://localhost/site/pageone">page one</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href="http://localhost/site/pagetwo">barely there</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li class="current-page"> 
      <a href="http://localhost/site/pagetwo">kith & kin</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 

     </li> 
     <li> 
      <a href="http://localhost/site/pagethree">focal point</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="http://localhost/site/pagefour">products</a> 
      <ul class="submenu"> 
       <li><a href="http://localhost/site/pageone/subone">subone</a></li> 
       <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li> 
       <li><a href="http://localhost/site/pageone/subthree">subthree</a></li> 
       <li><a href="http://localhost/site/pageone/subfour">subfour</a></li> 
       <li><a href="http://localhost/site/pageone/subfive">subfive</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="http://localhost/site/pagefive">clients</a> 
     </li> 

    </ul> 
</div></div> 

而这里的CSS：

#navbar { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    text-align: center; 
} 

#firstmenu { 
    margin: 6px auto 0 auto; 
    font-size: 16px; 
    list-style-type: none; 
    letter-spacing: -1px; 
} 

#firstmenu li { 
    display: inline; 
    position:relative; 
    overflow: hidden; 
    text-align: center; 
    margin-right: 10px; 
    padding: 5px 15px; 
} 

#firstmenu a { 
    text-decoration: none; 
    outline: none; 
    color: black; 
    font-weight: 700; 
    width: 75px; 
    cursor: pointer; 
} 

.current-page { 
    color: white; 
    background: url(../images/down_arrow.png) bottom center no-repeat; 

} 
.current-page a { 
    color: white; 
    border-bottom: 1px solid black; 
} 

#firstmenu .current-page a { 
    color: white; 
} 

#firstmenu li.hover { 
    color: white; 
    background: url(../images/down_arrow.png) bottom center no-repeat; 
} 
#firstmenu li.hover a { 
    color: white; 
    border-bottom: 1px solid black; 
} 

#firstmenu li ul li.hover { 
    color: white; 
    background: none; 
} 
#firstmenu li ul li.hover a { 
    color: white; 
    border-bottom: none; 
    text-decoration: underline; 
} 

#firstmenu li ul { 
    width: 900px; 
    color: white; 
    font-size: .8em; 
    margin-top: 3px; 
    padding: 5px; 
    position: absolute; 
    display: none; 
} 

#firstmenu li ul li { 
    list-style: none; 
    display: inline; 
    width: auto; 
} 

#firstmenu li ul li a { 
    color: white; 
    font-weight: normal; 
    border: none; 
} 

.sub-current-page { 
    font-weight: bold; 
    text-decoration: underline; 
} 

#firstmenu li ul li.sub-current-page a { 
    font-weight: bold; 
} 

最后，我不是不惜一切工作的JS（这是一个$（文件）。就绪（） ，当然）：

// Initialize some variables 
    var hideSubmenuTimer = null; 
    var current_page; 
$('.current-page ul:first').show(); 

    // Prep the menu 
    $('#firstmenu li').hover(function() { 
     // Clear the timeout if it exists 
     if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } 

     // Check if there's a current-page class set 
     if($('li.current-page').length > 0) { 
      current_page = $('li.current-page'); 
     } else { 
      current_page = false; 
     } 

     // If there's a current-page class, hide it 
     if(current_page) { current_page.children('ul:first').hide(); } 

     // Show the new submenu 
     $(this).addClass('hover').children('ul:first').show(); 

    }, function(){ 
     // Just in case 
     var self = this; 
     // Clear the timeout if it exists 
     if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); } 

     // Check if there's a current-page class set 
     if($('li.current-page').length > 0) { 
      current_page = $('li.current-page'); 
     } else { 
      current_page = false; 
     } 

     // Set a timeout on hiding the submenu 
     hideSubmenuTimer = setTimeout(function() { 
      // Hide the old submenu 
      $(self).removeClass('hover').children('ul').hide(); 

      // If there's a current-page class, show it 
      if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); } 
     }, 500); 
    }); 

那么我在做什么这样错了？作为一个便笺，我使用$（'。current-page ul：first'）。show（），因为如果我在.current-page中给CSS中的任何“显示”设置，它会定位它真的很奇怪在页面上。

Answer 1

答案是脚本试图运行悬停/的mouseenter /无论对李的子菜单的功能。通过给每个根菜单LI的他们自己的类，它现在起作用。这样就不会调用子菜单LI的功能。这是完成的功能：

$('#firstmenu .root-item').mouseenter(function() { 
    $(this).addClass('hover').children('ul:first').show(); 
    if($('.current-page').length > 0) { 
     $('.current-page').children('ul:first').hide(); 
    } 
}).mouseleave(function() { 
    $(this).removeClass('hover').children('ul').hide(); 
    if($('.current-page').length > 0) { 
     $('.current-page').children('ul:first').show(); 
    } 
}); 

Answer 2

你为什么搞砸超时？你应该只是.toggle()？

Answer 3

我重写它不使用悬停，但mouseover和mouseout。 不知道，如果你喜欢它，但这里是代码：

$(document).ready(function(){ 
      $(".submenu").hide(); 
      $("li").mouseover(function(){ 
      $(this).find('.submenu').show(); 
      }); 
      $("li").mouseout(function(){ 
      $(this).find('.submenu').hide(); 
      }) 
}); 

编辑：我花了时间来检查你的代码，发现有问题的行：

#firstmenu li { 
    display: inline; 

由于嵌套名单内第一个菜单div也适用于他们。内嵌的嵌套列表无法放置，因此不再放置在布局引擎中作为其dom父项的子项。结果是鼠标悬停在子菜单上仍然被认为是鼠标悬停在它的dom父项上（由于冒泡），但是在列表项之间，你将不再在dom父项上进行鼠标移动（因为它在原始设计中）。你需要重新考虑你的布局设计，因为现在它打破了布局引擎。

你或许应该重新考虑也利用列为表...