为什么手风琴只能工作一次？答案

【问题标题】：Why does the accordion works just once?为什么手风琴只能工作一次？
【发布时间】：2018-05-20 07:42:35
【问题描述】：

我正在尝试获得这种效果：

当我第一次打开对话框时，一切正常。但是如果我关闭对话框并再次打开它，这就是我所看到的：

有人知道如何解决吗？这是我的代码的一部分：

function showLicenses(cluster_id) {
    // get licenses from window object
  var licenses = window.licenses[cluster_id];
    $('#accordion-cluster').html('');
  // sort reverse timestamp
  licenses = licenses.sort(function(a, b){
    return new Date(b.date_created) - new Date(a.date_created);
  });

  $.each(licenses, function(index, license){
    console.log(license);
    var id = license.license_id;
    var licenseNo = index + 1;
    if(licenseNo !== 1){
      //$("#accordion-cluster").append('<hr><br>')
    }
    $("#accordion-cluster").append('<h2> LICENSE ' + licenseNo + '<a class="removeLicense" style="background:#c8212f;color:white;padding:5px;margin:15px;position:absolute;top: 0;right: 0;" data-license-id="' + license.license_id + '">remove</a></h2><div>' + license.key_contents + '</div>');
  });
  $("#dialog").dialog({
      height: 500,
      width: 800,
      modal: true,
      open: function(){
          var icons = {
              header: "ui-icon-triangle-1-s",    // custom icon class
              activeHeader: "ui-icon-triangle-1-n" // custom icon class
          };
          console.log($("#accordion-cluster"));
          $("#accordion-cluster").accordion({
              collapsible : true,
              active : 'none',
              icons: icons
          });
      }
  });
  $.LoadingOverlay("hide");
}

还有 HTML：

<div id="dialog" title="License Key">
    <div style="white-space: pre-wrap;" id="license-key">
         <div id="accordion-cluster">

         </div>
    </div>
</div>

回答cmets，这是打开的手风琴的外观（只是我第一次打开对话框）：

【问题讨论】：

你能展示一下你第一次打开它时的样子吗？因为我们看不出第一眼和第二眼的区别。
@HimanshuUpadhyay 第一张图片显示了第一次，手风琴正在工作。第二张图片显示重新打开时，手风琴不起作用
嗨@HimanshuUpadhyay。第一个打印屏幕是第一次。所以这正是我需要的。第二次是您看到的第二个打印屏幕。 html 的结构是正确的，但手风琴不起作用。
似乎第二次所有手风琴都打开了？
不。手风琴根本不工作。如果它们被打开，它们应该看起来像这样（我在问题中添加了一个新的打印屏幕）

标签： jquery jquery-ui accordion jquery-ui-dialog jquery-ui-accordion

【解决方案1】：

您必须在更改内部数据之前销毁手风琴，这样做的最佳时机是关闭对话框时：

$("#dialog").dialog({
    height: 500,
    width: 800,
    modal: true,
    open: function () {
        var icons = {
            header: "ui-icon-triangle-1-s",    // custom icon class
            activeHeader: "ui-icon-triangle-1-n" // custom icon class
        };

        $("#accordion-cluster").accordion({
            collapsible : true,
            active : 'none',
            icons: icons
        });
    },
    close: function () {
        $('#accordion-cluster').accordion('destroy');
    }
});

对我有帮助的相关问题：re-initialize jquery accordion on callback 请注意，引用的问题不是重复的，因为该问题涉及对话。

【讨论】：

【解决方案2】：

每次用户点击时销毁和创建视图是没有意义的。它可能适用于小规模的解决方案，但您绝对应该根据规范使用JQueryUI accordion API ：

使用以下方法在页面加载时启动手风琴 div：

$('#accordion').accordion()

然后在任何更改调用中：

$('#accordion').accordion( "refresh" )

查看Docs for refresh

【讨论】：