JQuery UI手風琴 - 嵌套式手風琴不是動畫

Question

我有多個嵌套的JQuery UI手風琴 - 一個手風琴包含另一個。 在展開首先不可見的嵌套式手風琴後，查看附帶的小提琴和動畫（或者更確切地說，缺少動畫）。很難用文字來解釋。

我該如何實現平滑的「推動」動畫？

HTML與手風琴：

<div id="accordion_broadcasts"> 
    <div id="acc_broadcasts_header"> 
    <div class="accordion_descriptions"> 
     <div class="acc_descriptions_header"> 
     <table class="broadcast_table"> 
      <tr class="broadcast_tr"> 
      <td class="broadcast_td1">foobar</td> 
      <td class="broadcast_td2">CLICK (working)</td> 
      </tr> 
     </table> 
     </div> 
     <div> 
     only visible if unfolded 
     </div> 
    </div> 
    </div> 
    <div> 
    <div class="accordion_descriptions"> 
     <div class="acc_descriptions_header"> 
     <table class="broadcast_table"> 
      <tr class="broadcast_tr"> 
      <td class="broadcast_td1">foobar</td> 
      <td class="broadcast_td2">CLICK (poorly animated)</td> 
      </tr> 
     </table> 
     </div> 
     <div> 
     only visible if unfolded 
     </div> 
    </div> 
    </div> 
</div> 

的Javascript：

//Outer accordion 
$("#accordion_broadcasts").accordion({ 
    collapsible: true, 
    active: false, 
    disabled: true, 
    header: "#acc_broadcasts_header", 
    activate: function(event, ui) {   
    $(".accordion_descriptions").accordion("refresh"); 
    $("#accordion_broadcasts").accordion("refresh"); 
    } 
}); 

//Inner accordion  
$(".accordion_descriptions").accordion({ 
    collapsible: true, 
    active: false, 
    header: ".acc_descriptions_header", 
    disabled: true, 
    activate: function(event, ui) {   
    $(".accordion_descriptions").accordion("refresh"); 
    $("#accordion_broadcasts").accordion("refresh"); 
    } 
}); 

//fold outer accordion  
$("#unfold_broadcast").click(function(){ 
    if ($("#accordion_broadcasts").accordion("option", "active") === false){ 
    $("#accordion_broadcasts").accordion({active: 0}); 
    } 
    else{ 
    $("#accordion_broadcasts").accordion({active: false}); 
    } 

    $("#unfold_broadcast").remove(); 
}); 

//fold inner accordion 
$(".broadcast_td2").click(function(){ 
    if ($(this).closest(".accordion_descriptions").accordion("option", "active") === false){ 
    $(this).closest(".accordion_descriptions").accordion({active: 0}); 
    } 
    else{ 
    $(this).closest(".accordion_descriptions").accordion({active: false}); 
    } 
}); 

JSFiddle

注1：例如的jsfiddle是我的實際代碼的簡化版本。問題依然存在。

注2：這些手風琴可能存在一些不必要的刷新要求。我一直在玩刷新方法，直到手風琴奏效。

Answer 1

魔術是將heightStyle: "content"添加到外部手風琴的屬性。

所以它的JavaScript看起來像這樣：

$("#accordion_broadcasts").accordion({ 
    collapsible: true, 
    active: false, 
    disabled: true, 
    header: "#acc_broadcasts_header", 
    heightStyle: "content", 
    activate: function(event, ui) {   
    $(".accordion_descriptions").accordion("refresh"); 
    $("#accordion_broadcasts").accordion("refresh"); 
    } 
}); 

看到我更新JSFiddle。

我有同樣的問題，並以這種方式修復它。 在我的研究過程中，我發現外部手風琴的內容高度在展開時爲零。因此，如果您現在是嵌套內容的確切大小，那麼將內容div的高度設置爲一個解決方案，但heightStyle: "content"會爲您解決這個問題。