jQuery的動畫菜單＃懸停功能（）

我有一個水平菜單，這是由JQuery的動畫：jQuery的動畫菜單＃懸停功能（）

問題（S）：我一個有一個 '當前的' 父項，其應顯示ul。如果我懸停另一個父項目，則應隱藏當前顯示的ul。如果懸停（）是「已完成」，那麼將會顯示懸浮物的一個形式並淡出。所有這些都不起作用，就像它應該那樣。你可以在jsfiddler上看到代碼。請嘗試懸停'Moda'，你會看到問題。

許多在此先感謝，拉爾斯

來源

2011-05-31 Lars

哪些瀏覽器需要此功能？具體來說，是否需要IE6支持？ – andyb 2011-06-01 06:03:23

 jQuery("#headnav_primary .top-item").hover(

    function(){ 

     jQuery('.current-menu-item ul').hide('fast'); 
     jQuery(this).find('ul').show('slow'); 

     },  
     function() { 
     jQuery(this).find('ul').hide('fast'); 
      });

類的頂級項目「添加到您的標題裏的鏈接。

來源

2011-05-31 23:22:03

@AR我剛剛做了一個js小提琴手的更新。問題仍然存在。 :( – Lars 2011-05-31 23:37:36

我更新了代碼，對我來說工作的很好，我真的沒有看到需要特別隱藏.current-menu-item，因爲它默認情況下不可見，所以我只是完全刪除該行。 – 2011-05-31 23:42:20

@ AR請在這個新的小提琴上找點兒作品：http：//jsfiddle.net/ZdVbd/，隨時可以改變它，我改變它的方式，你指定它，但它不起作用 – Lars 2011-05-31 23:53:53

根據您需要使用哪種瀏覽器，有幾種方法可以使子菜單顯示出來。

您可以將JavaScript jQuery代碼更改爲以下內容，當輸入任何<li>時，它將簡單地隱藏所有的子菜單，並顯示當前的<li>的子菜單。

var subMenus = $("#headnav_primary li ul"); 

$("#headnav_primary li").mouseenter(function() { 
    subMenus.hide(); 
    $(this).children('ul').show('slow'); 
}).mouseleave(function() { 
    subMenus.hide('fast'); 
});

或者完全刪除所有的JavaScript和只添加當父<li>盤旋，顯示子菜單這個簡單的CSS規則。

#headnav_primary li:hover ul { 
    display:block !important; 
}

注：這不會在舊的瀏覽器，尤其是IE6工作。另外，我添加了!important，因爲您目前在優先級爲sub-menus的子菜單上內嵌了style="display:none"。如果刪除內聯樣式，則可以刪除!important。

編輯：這裏是a better demo是只有使用CSS。這在IE6中不起作用，因爲它只支持:hover對錨標籤。如果你需要IE6的支持，我可以更新，但會使用jQuery。

來源

2011-05-31 23:41:54 andyb

請看看小提琴，我做了更新，但仍然有問題，請將鼠標懸停在'moda' – Lars 2011-05-31 23:55:36

@Lars確定，所以它是懸停在你需要幫助的子菜單，我知道問題是什麼，並會更新我的答案呃很快。你能否讓我知道你是否需要這個工作在IE6中？ – andyb 2011-06-01 05:47:42

jQuery的動畫菜單＃懸停功能（）

回答

相關問題