0

目前我正在开发一个使用 jQuery UI Accordion 的项目。因此，我通过这样做来初始化元素上的手风琴

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

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

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

在一个简化的jsfiddle 中——它与 ajax 调用完全相同——你可以看到它的样子。到目前为止，它似乎工作得很好，但我面临一个问题。在我的初始化中，我说我希望关闭所有面板，但是在手风琴上调用刷新之后，所有这些设置似乎都消失了，一个面板打开了。

请注意，我在小提琴中实现了 jQuery UI v1.10.2。更新说明说

refresh 方法现在将识别已添加或删除的面板。这使手风琴与分析标记以查找更改的选项卡和其他小部件保持一致。

好吧，但为什么要“覆盖”我为这个手风琴定义的设置？我还考虑过在空上创建手风琴可能是错误的可能性，<div>所以我用给定的条目对其进行了测试，然后添加了一些元素。但是jsfiddle显示了完全相同的结果。

在最近的SO 线程中，我发现有人基本上和我做同样的事情，但在他的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 个条目的内容，因为面板的数量会有所不同。

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

4

1 回答 1

2

有关此行为的解释，请查看 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();
}
于 2013-04-30T11:01:14.373 回答