下拉懸停問題（jQuery）

我做了一個簡單的下拉菜單，這工作正常，但我想在按鈕和下拉菜單之間（底部按鈕/鏈接和頂部下拉菜單之間）添加一些空間。下拉懸停問題（jQuery）

問題是，如果我不添加按鈕和下拉菜單之間的空間它工作正常，但一旦我增加他們之間的空間下拉菜單回去隱藏一旦我離開按鈕。

我可以讓懸停在li上，但李有風格附加到它，所以我不能做很多與此（也是一個元素有固定的樣式附加到它）。

那麼，如果我將鼠標懸停在其父母li上，我如何才能讓下拉菜單保持活躍狀態？

jQuery代碼

$('#sub-menu li').hover(function(){ 
     $(this).children('ul').stop(true,true).fadeIn(100); 
    },function(){ 
     $(this).children('ul').stop(true,true).fadeOut(100); 
    });

基本的HTML代碼

<div> 
    <ul> 
     <li><a href="#">link</a> 
      <ul> 
       <li>dropdown menu</li> 
       <li>dropdown menu</li> 
       <li>dropdown menu</li> 
      </ul> 
     </li> 
    </ul> 
</div>

來源

2011-05-24 user759235

你可以包括你的CSS和什麼是你正在做的添加空間（保證金，填充絕對位置等。）？ – 2011-05-24 18:28:14

你也許可以在懸停的主列表中添加一個邊框底部。使它變厚並且與標題背景顏色相同，因此它將充當您在下拉菜單和菜單按鈕之間所需的填充。我還沒有檢查過它。 – 2011-05-24 18:35:07

哪裏是按鈕，你爲誰分配'ID =「子菜單」'; 'ul'或'div' – diEcho 2011-05-24 18:40:06

做到這一點的典型方法是設置一個計時器，收於母公司的鼠標離開事件的子菜單，但取消定時器如果你mouseenter子菜單。將此計時器設置爲150-250毫秒通常會給中等移動速度慢的鼠標留出足夠的時間以保持預期的行爲，但當菜單爲打算關閉時，感覺不會太差。

沒有測試，更像是僞代碼，只是爲了顯示的一般方法：

var submenuTimer = null; 

$('#sub-menu li') 
    .mouseenter(function(){ 
     $(this).children('ul').stop(true,true).fadeIn(100); 
    }) 
    .mouseleave(function{ 
     submenuTimer = 
     setTimeout(
     function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200 
     ); 
    }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });

來源

2011-05-24 18:57:07 RwwL

我想我明白了，雖然CSS將是非常有益這裏。我相信你的孩子ul有position:abosolute，你有一個hover在母公司li。當兩者在一起時，您可以在不離開li的情況下將鼠標從一個移動到另一個，但是一旦您在兩者之間留下間隙，將鼠標從鏈接移動到ul菜單將使父li導致mouseleave觸發。

我可能會處理這個問題的方式如下。而不是重新定位孩子ul，將ul包裝在一個div中。在div上放一個padding-top，儘可能多的空間，你想要的。然後移動所有的定位CSS和jQuery的東西來顯示/隱藏/定位div。通過這種方式，從鏈接到菜單ul不會觸及空白區域並隱藏，而是移動到仍爲父級li的一部分的透明區域，菜單不會隱藏。

希望幫助，再次css將有助於看到你在做什麼。

編輯：創建一個小提琴來演示這個想法。第一個鏈接顯示問題，第二個顯示修正，帶有邊框以顯示實際發生的情況，第三個是實際修復。

http://jsfiddle.net/fTmLh/

來源

2011-05-24 18:57:19

答案很簡單，只是增加了底部填充在<LI>標籤爲頂級鏈接。創建一個新類專門爲他們或增加它的即時，就像這樣：

<li style="padding-bottom: 8px;">

來源

2013-01-09 15:16:39 Dave

下拉懸停問題（jQuery）

回答

相關問題