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"がこれを行います。