jQuery slideToggle在下拉動畫結束時跳轉

Question

我試圖用下拉菜單創建一個側欄。我爲下拉動畫使用Jquery的slideToggle()函數。我的問題是，當下拉動畫上下隱藏其他下拉菜單時，動畫顯得波濤洶涌。我已閱讀了一些選項，但似乎無法找到適合我的解決方案。

我設法重新與這裏的jsfiddle邊欄： https://jsfiddle.net/jckly/54m54jq3/

感謝您的幫助。

Answer 1

這是由於你的動畫項目的填充。基本上，jQuery必須對高度和填充都進行動畫處理，這使得它不太流暢。看到這個版本沒有填充： https://jsfiddle.net/54m54jq3/1/ 我建議在每個菜單項中添加另一個div，並對其應用填充。

編輯： https://jsfiddle.net/54m54jq3/2/

$('.dropdown').on('click', function() { 
    var continent; 
    $('.dropdown').not(this).slideToggle(300, function() { 
     continent = $(this).clone().children().remove().end().text().toLowerCase().trim(); 
     continent = '.' + continent; 
     console.log(continent); 
     $(continent).slideToggle(300); 
    }); 
});