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

Question

我正在嘗試使用下拉菜單創建側邊欄。 我正在使用Jquery的slideToggle()函數制作下拉動畫。 我的問題是，當下拉菜單動畫上下隱藏其他下拉菜單時，動畫顯得斷斷續續。 我在這里閱讀了一些選項，但似乎找不到適合我的解決方案。

我設法在這里用JSFiddle重新創建側邊欄： https ://jsfiddle.net/jckly/54m54jq3/

謝謝你的幫助。

Answer 1

這是由於要設置動畫的項目的填充。 基本上，jQuery必須同時對高度和填充進行動畫處理，這使其變得不太平滑。 看到此版本時不使用填充： https : //jsfiddle.net/54m54jq3/1/我建議在每個菜單項中添加另一個div，然后對其應用填充。

編輯：嘗試在JS中使用回調，以便在其他人完成隱藏之前不要打開菜單： 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);
    });
});