4

jQueryUI 手风琴的结构是这样的，

<h2>title</h2><div>content</div>

对于每个项目。我要做的是通过循环在我的主干视图中创建手风琴，但是主干为每个项目创建 div 标签，所以我有这样的 html 代码

<div><h2>title</h2><div>content</div></div>

这使得 jQuery Accordion 控件无法正常工作，折叠和展开无法正常工作。如果我不能在 el 或标记名上设置任何内容，我认为这可以解决，但我无法找到。有没有办法解决这个问题？

4

1 回答 1

2

我认为您最好将手风琴留在一个视图中，然后在每个面板内有一个单独的视图。毕竟，<h2>s 是手风琴整体的控件，而不是特定面板的控件。

你会有一些像这样的每个面板视图：

var P = Backbone.View.extend({
    render: function() {
        // Add the panel's content to this.$el (which is a <div> by default).
        return this;
    }
});

然后是这样的手风琴视图：

var A = Backbone.View.extend({
    render: function() {
        var panels = [ ... ];
        for(var p, i = 0; i < panels.length; ++i) {
            p = new P({ ... });
            this.$el.append('<h3><a>' + panels[i] + '</a></h3>');
            this.$el.append(p.render().el);
        }

        // The accordion wants to know the sizes of things so
        // we let the DOM sort itself out before binding the
        // accordion.
        var _this = this;
        setTimeout(function() { _this.$el.accordion() }, 0);

        return this;
    }
});

然后你可以简单$('#something').append((new A).render().el)地一切都很好，同时把所有东西都留在它应该在的地方。

您还可以向视图添加一个title方法P，然后A询问面板它的名称/标题/标题应该是什么，以便所有面板信息都很好地包含在每个面板视图中。

演示：http: //jsfiddle.net/ambiguous/Y49W8/

于 2012-05-30T04:22:31.747 回答