將高度設置爲自動時手風琴動畫破裂！重要

Question

發生了什麼事？：我的jQuery手風琴的動畫已損壞。它在關閉之前的標籤之前短時間點擊下一個標籤後顯示之前打開的標籤。動畫也不滑動。

CSS：從this answer

/* The following was added into accordion.css */ 
.ui-accordion .ui-accordion-content { height: auto!important; } 

---

找到jQuery的

$(document).ready(function() { 

    $("#accordion").accordion({ 
     active: false, 
     fillSpace: false 
    }); 

    $("#accordion").accordion("option", "active", false); 
    $("#accordion").accordion("option", "fillspace", false); 
}); 

---

我已經試過：我有擺弄fillSpace和height的值。在accordion.css中，我嘗試了overflow: visible!important;，但格式真的搞砸了。

我想什麼發生：清潔屏幕動畫，這取決於內容的每個<div>（我有什麼AKA的CSS以上）的量各部分的高度。

Answer 1

我覺得有點傻了，但簡單地設置autoHeight假帶走部分底下多餘的空間用更少的內容。動畫也很流暢。

$(document).ready(function() { 

    $("#accordion").accordion({ 
     active: false, 
     autoHeight: false, // ADDED 
     collapsible: true 
    }); 

    $("#accordion").accordion("option", "active", false); 
    $("#accordion").accordion("option", "autoHeight", false); // ADDED 
    $("#accordion").accordion("option", "collapsible", false); 
}); 

Answer 2

如果我沒有弄錯你使用的是插件？至少對我來說這是一個問題（我恨他們是因爲意外的行爲）。所以前一陣子我創作了自己的手風琴。 你可以查看工作示例HERE. 希望它可以幫助你！
這裏是我的代碼：

$(document).ready(function() { 

    $('.wrapper ul li ul:first').addClass('active'); 
    $('.wrapper ul li ul').hide(); 
    $('a.home,a.about,a.service,a.contact').click(function()  { 
    if($('a.home,a.about,a.service,a.contact').next('ul').hasClass('active')) { 
    $('.active').stop(true, true).slideUp('slow'); 
    $('.active').removeClass('active'); 
    $(this).next('ul').addClass('active'); 
    $('.active:not(:animated)').stop().slideDown('slow'); 
    } 
    }); 
    });