JQuery UI Accordion - 嵌套手风琴没有动画答案

【问题标题】：JQuery UI Accordion - Nested Accordions not animatedJQuery UI Accordion - 嵌套手风琴没有动画
【发布时间】：2016-10-26 20:44:45
【问题描述】：

我有多个嵌套的 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：在这些手风琴上可能有一些不必要的刷新调用。我一直在尝试使用 refresh 方法，直到手风琴起作用为止。

【问题讨论】：

请在问题本身中包含minimal reproducible example，而不是在第三方网站上。
@MikeMcCaughan 完成。

标签： javascript jquery-ui

【解决方案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" 会为您执行此操作。

【讨论】：