Question

我想要达到这个效果：

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

有人知道如何修复它吗？这是我的代码的一部分：

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>

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

Answer 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 请注意，引用的问题是不重复，因为此问题涉及对话框。

Answer 2

每次用户单击时销毁并创建视图都没有意义。它可能适用于小型解决方案，但您绝对应该根据规格使用JQueryUI API：

使用以下命令在页面加载上启动手风琴div：

$('#accordion').accordion()

然后在任何变更呼叫中：

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

签出Docs

手风琴为什么只运作一次？

2 个答案: