jquery-ui – 如何在el或tagname上设置任何内容以使用jquery ui accordion

2023年2月23日 310次阅读

jQueryUI的Accordion结构是这样的,

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

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

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

这使得jQuery Accordion控件无法正常工作,折叠和展开不起作用.
如果我可以在el或tagname上设置任何内容,我认为这可以解决,但我无法找到.
有什么方法可以解决这个问题吗？

最佳答案 我认为你最好将手风琴放在一个视图上,然后在每个面板中有一个单独的视图.毕竟,< h2>是手风琴作为整体而不是特定面板的控制.

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

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)这一切都很好,同时把所有东西留在原处.

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

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

点赞