JQuery导航 - 下拉导致问题

所以我目前正在尝试使用JQuery，并且到目前为止导航工作正常。我已经添加了下拉菜单，并且引发了问题，并想知道是否有人可以看到原因。JQuery导航 - 下拉导致问题

HTML：

<ul id="navigation"> 
     <li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li> 
     <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span> 
      <ul class="subnavigation"> 
       <li>Portfolio 1 Column</li> 
       <li>Portfolio 2 Column</li> 
      </ul> 
     </li> 
     <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li> 
     <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li> 
    </ul>

JQuery的：

<script type="text/javascript"> 
$(document).ready(function() { 

    // On hover: 
    $('#navigation li').hoverIntent(function() { 
     width = $(this).children('span:nth-child(2)').width(); 
     text = $(this).children('span:nth-child(2)');   

     var newwidth = (width + 15) // Original width + 15px padding   
     text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible 
     text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size 
     $(this).children('ul').slideDown('slow') 

    }, 
    function() { 
     text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element 
     text.animate({"width":+width+"px"}, 0); 
     setTimeout(function() { 
      $('#navigation li .navigation-text').hide(); 
     },100); 
     $(this).children('.subnavigation').slideUp('slow'); 
    }); 

}); 

</script>

如果将鼠标悬停在绿条或任何LIS中不包含下拉列表，然后它工作罚款。它打开和关闭，并继续工作，如果你再次做。但是，如果您将鼠标悬停在下拉列表上并将其保留在该下拉列表的第一个LI上，则继续前进到父项关闭的第二个LI，并以错误的大小结束，并且下拉列表的第一个LI隐藏其自身。

也许最好的，如果你有一个玩它，所以你知道我在做什么，因为我不知道这很有道理。

JFiddle：http://jsfiddle.net/5NcHk/ 直播：http://dev.evaske.com/Navigation/

来源

2013-03-20 Tenatious

那么你在#navigation里面的所有li上做了hoverIntent。这包括子项目因此，当你悬停在里面时，它会隐藏那个。

从

$('ul#navigation li').hoverIntent(function() {

改变你的选择，以

$('ul#navigation > li').hoverIntent(function() {

来源

2013-03-20 11:20:02

美丽！谢谢：） – Tenatious 2013-03-20 11:22:13

你分配hoverIntent事件处理程序，所有李时珍在导航。这会导致在从一个子菜单项移动到另一个子菜单项时触发mouseout事件。如果您足够快地移动鼠标以不触发“组合链接1”上的事件并移至第二个链接，则它可以正常工作。这只是一个问题，当你悬停在链接1，然后链接2.

您可以通过更新mouseout处理程序来解决此问题，以检查在执行您的mouseout操作之前，鼠标是否仍在子菜单内。

来源

2013-03-20 11:19:27

JQuery导航 - 下拉导致问题

回答

相关问题