如何隱藏和顯示具有動畫和緩動效果的元素

Question

我有一個N級菜單結構，我必須首先隱藏所有級別的子菜單，並在父菜單的懸停上顯示它們。我一直在嘗試我必須隱藏所有的孩子並點擊顯示，但問題是當我點擊其他父母時，先前打開的菜單必須關閉，如果我再次點擊該菜單，它的孩子應該處於隱藏狀態，我想一些緩動和動畫效果，同時打開和關閉菜單，它應該作爲一個切換。

這是我一直在努力做的事情：

$(document).ready(function(){ 
$("li").children('ul').hide(); 
$("li a").click(function(){ 
$(this).next('ul').toggle();    
$(this).parent().siblings('li').children('ul').hide(); 

這裏是什麼，我試圖做

我不應該使用菜單上的任何類和或任何屬性the爵士小提琴只有頂級ul有剩下的類每件事情都應該在jQuery中完成我需要緩動和動畫部分到

Answer 1

您可以使用slideUp()和slideDown()添加一些動畫。

jsFiddle

$(document).ready(function(){ 
    $("li").children('ul').hide(); 
    $("li a").click(function(){ 
     $(this).next('ul').find('ul').hide(); 
     $(this).next('ul').slideDown();    
     $(this).parent().siblings('li').children('ul').slideUp();   
    });  
}); 

您還可以通過使用CSS3過渡與活動列表項的類做到這一點很容易。

編輯：我現在明白，嘗試添加這個來隱藏所有內部列表，當你點擊打開一個。

$(this).next('ul').find('ul').hide(); 

Answer 2

要完成@Tyriar答案，這是如何使用jQueryUI的緩解作用：http://jqueryui.com/effect/#easing

http://jsfiddle.net/6u4LJ/2/

$(document).ready(function() { 
    $("li").children('ul').hide(); 
    $("li a").click(function() { 
     $(this).next('ul').animate({ 
      height: "show" 
     }, 2000, 'easeInOutBounce'); 
     $(this).parent().siblings('li').children('ul').animate({ 
      height: "hide" 
     }, 2000, 'easeInOutBounce'); 
    }); 
});