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導航 - 下拉導致問題

回答

相關問題