Question

目前我正在开发一个项目，我使用jQuery UI Accordion。因此，我通过

初始化元素上的手风琴

<div id="accordion"></div>

$('#accordion').accordion({
    collapsible: true,
    active: false,
    heightStyle: "content"
});

在初学手风琴后，我附加了一些来自AJAX请求的数据。（取决于用户互动）

在简化的jsfiddle中 - 与ajax调用完全相同 - 您可以看到它的外观。到目前为止它似乎运作良好，但我面临一个问题。在我的初始化中，我说我想要关闭所有面板，但在手风琴上调用刷新后，这些设置的所有内容似乎都消失了，一个面板打开了。

请注意，我在我的小提琴中实现了jQuery UI v1.10.2。 Update notes说

现在，刷新方法将识别已添加或删除的面板。这使得手风琴与标签和其他小部件一致，解析标记以找到变化。

它确实如此，但为什么要“覆盖”我为这种手风琴定义的设置？我还想到了在空<div>上创建手风琴可能是错误的，所以我用给定的条目测试了它，然后添加了一些元素。但jsfiddle显示完全相同的结果。

在最近的SO thread中，我找到了一个基本上和我一样的人，但在jsfiddle他面临同样的“问题”。他添加了一个新面板，刷新后会打开第一个面板。

我目前解决这个问题的方法是销毁手风琴并在每次有新内容时重新创建它。但这对我来说似乎相当粗糙，我认为刷新方法解决了每次应用新内容时销毁手风琴的需要。查看最后一个jsfiddle

$(document).ready(function () {

    //variable to show "new" content gets appended correctly
    var foo = 1;
    $('#clickMe').on('click', function () {
        var data = '';
        for (var i = 0; i < 3; i++) {
            data += '<h3>title' + foo + '</h3><div>content</div>';
            foo++;
        }

        if ($('#accordion').hasClass('ui-accordion')) {
            $('#accordion').accordion('destroy');
        }
        $('#accordion').empty().append(data).accordion({
            collapsible: true,
            active: false,
            heightStyle: "content"
        });
    });
});

不幸的是，我不能选择更改给定3个条目的内容，因为面板的数量会有所不同。

所以我的问题是标题中的问题，是否需要这样的行为，或者是否有人面临同样的问题？

Answer 1

有关此行为的解释，请查看jquery-ui折叠小部件的refresh（）方法，您遇到的问题位于第10行：

refresh: function() {
    var options = this.options;
    this._processPanels();
    // was collapsed or no panel
    if ((options.active === false && options.collapsible === true) || !this.headers.length) {
        options.active = false;
        this.active = $();
    // active false only when collapsible is true
    } if (options.active === false) {
        this._activate(0); // <-- YOUR PROBLEM IS HERE
    // was active, but active panel is gone
    } else if (this.active.length && !$.contains(this.element[0], this.active[0])) {
        // all remaining panel are disabled
        if (this.headers.length === this.headers.find(".ui-state-disabled").length) {
            options.active = false;
            this.active = $();
        // activate previous panel
        } else {
            this._activate(Math.max(0, options.active - 1));
        }
    // was active, active panel still exists
    } else {
        // make sure active index is correct
        options.active = this.headers.index(this.active);
    }
    this._destroyIcons();
    this._refresh();
}

jQuery UI Accordion - 刷新方法是否会覆盖初始化设置？

1 个答案: