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"会为您执行此操作。

JQuery UI Accordion - 嵌套的Accordions没有动画

1 个答案: