jQuery幻燈片打開和關閉菜單。如何阻止他們瘋狂？

Question

我想讓一個垂直菜單的子菜單在被隱藏時展開和摺疊。這是我迄今爲止的內容，但如果你這麼做的話，它會變得很瘋狂，因爲所有的動畫都會立即運行並且延遲。我怎樣才能確保一次只擴展一個菜單。

我也設置了current_page_item爲開放但默認，我不希望這擴大或collaspe。

<ul> 
<li class="current_page_item"><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li class="page_item"><a href="#">Child page</a></li> 
    <li class="page_item"><a href="#">Child page</a></li> 
    <li class="page_item"><a href="#">Child page</a></li> 
    <li class="page_item"><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li class="page_item"><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li class="page_item"><a href="#">Child page</a></li> 
    <li class="page_item"><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li class="page_item"><a href="#">Parent Item</a> 
    <ul class="children"> 
    <li class="page_item"><a href="#">Child page</a></li> 
    <li class="page_item"><a href="#">Child page</a></li> 
    </ul> 
</li> 
<li class="page_item"><a href="#">Parent Item</a></li> 
<li class="page_item"><a href="#">Parent Item</a></li> 
</ul> 

jQuery('ul.children').hide(); 
jQuery('li.current_page_item ul.children').show(); 
jQuery('li.current_page_item').parent().show(); 

jQuery("li.page_item").hover(function() { 
    jQuery(this).find('ul.children').delay(300).slideDown('slow'); 
    }, function() { 
    jQuery(this).find('ul.children').delay(300).slideUp('slow'); 
}); 

Answer 1

想通了與hoverindent

// Accordion menus 
var menudown = {  
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
interval: 200, // number = milliseconds for onMouseOver polling interval  
over: showSub, // function = onMouseOver callback (REQUIRED)  
timeout: 500, // number = milliseconds delay before onMouseOut  
out: hideSub // function = onMouseOut callback (REQUIRED) 
}; 

function showSub(){ 
    jQuery(this).addClass('down').removeClass('up').children("ul.children").slideDown(500); 
} 

function hideSub(){ 
    jQuery(this).addClass('up').removeClass('down').children("ul.children").slideUp(700); 
} 

jQuery('li').not('.current_page_item, .current_page_ancestor').has('ul').hoverIntent(menudown); 

Answer 2

我們使用JQuery hoverintent插件來解決這個問題。它很好地解決了這個問題。從網站

http://cherne.net/brian/resources/jquery.hoverIntent.html

樣品：

var config = {  
    over: makeTall, // function = onMouseOver callback (REQUIRED)  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    out: makeShort // function = onMouseOut callback (REQUIRED)  
}; 

$("#demo3 li").hoverIntent(config); 

HTH。