jQuery懸停菜單嵌入列表項

我有一個看起來像這樣的菜單 - 不是我的選擇的格式，它會自動從WordPress的產生：

CSS

.menu_body { 
    display: none; 
}

HTML

<ul id="menu-list"> 
    <li class="menu_head"><a href="#">Header-1</a></li> 
    <li class="menu_head"><a href="#">Header-2</a> 
    <ul class="menu_body"> 
     <li><a href="#">Link-1</a></li> 
     <li><a href="#">Link-2</a></li> 
    </ul> 
    </li> 
    <li class="menu_head"><a href="#">Header-3</a> 
    <ul class="menu_body"> 
     <li><a href="#">Link-3</a></li> 
     <li><a href="#">Link-4</a></li> 
    </ul> 
    </li> 
    <li class="menu_head"><a href="#">Header-4</a></li> 
</ul>

我想要做的是編寫一個基於jQuery懸停的函數，將鼠標懸停在類menu_head的項目上時，會顯示其下的類「menu_body」中的項目。

從其他地方我拿起了這樣的想法，它使用一個功能，將打開一個菜單和關閉所有其他因爲它這樣做是整齊和整潔的想法。這將是這個樣子：

$("#menu-list li.menu_head").mouseover(function() 
{ 
$(this).children('.menu_body').slideDown(500).siblings(".menu_body").slideUp("slow"); 

});

這並不工作，但你可以看到我想要做的事情 - 得到的第一個相關的「menu_body」項並將其向下滑動，然後讓所有其他「 menu_body'項目並將其滑動。

你可以看到這與這裏的DIV一個例子（這是我偷的想法）：

Example link

但巨大的努力，以使其與嵌套div的工作。

有人可以建議我需要做什麼，並解釋所以我可以理解我做錯了什麼？

乾杯，

馬特

來源

2012-11-13 Matt Thrower

嘗試像這樣 - DEMO

$("#menu-list li.menu_head").mouseover(function() { 
    $(".menu_body").stop().slideUp("slow"); 
    $(this).children('.menu_body').delay(600).stop().slideDown(500); 
});

你.menu_body項目不兄弟姐妹彼此。

來源

2012-11-13 17:34:14

試過這個。它非常片狀。不知道爲什麼，但菜單將停止一半的開放，然後拒絕打開，除非是頁面刷新和其他古怪。 –

添加一個延遲的動畫之間，就像這樣：

$(this).children('.menu_body').slideDown(500).delay(500).siblings(".menu_body").slideUp("slow");

來源

2012-11-13 17:36:12 Nelson

我會建議使用一個鼠標懸停和鼠標離開。

$("#menu-list li.menu_head").mouseOver(function() { 
    $(this).children('.menu_body').slideDown(500); 
}); 
$("#menu-list li.menu_head").mouseLeave(function() { 
    $(this).children('.menu_body').stop().slideUp(500); 
});

否則，如果你不滾動到另一菜單元素，可以說對下面的內容，你的向上滑動有可能不能正確調用。

Example

來源

2012-11-13 17:42:01 AJak

不好：如果你以一種奇怪的方式將鼠標懸停在標題3上，假設你在標題2內，將鼠標懸停在標題3上並在標題2完全摺疊之前返回到標題2的子項，則會出現循環行爲。它的可能性很小，但我實際上意外地發現了它。 – Cimbali

應該只需要添加一個stop（），這似乎解決了這個問題。當時沒有想到這一點，很好的捕捉。 – AJak

添加停止在哪裏？我已經實現了這一點，它似乎工作得很好，但我認爲我繼續捕捉提到的行爲。還有幾個滾動後，整個事情似乎鎖定:( –

馬特，請嘗試使用defereds。

類似以下內容可能有助於作爲起始塊。

$.when($('div').animate({"opacity": "0"}, 1000)).done(function(){ 
    // divs hidden, run code to show them 
    $('div').animate({"opacity": "100"}, 1000) 
});

來源

2012-11-14 12:49:03

jQuery懸停菜單嵌入列表項

回答

相關問題