Question

我正在尝试初始化几个最初打开不同项目的JQuery UI手风琴。我不想单独初始化每个手风琴，但宁愿将它们全部包含在一个功能中（也是为了更容易与CMS集成）。我试图这样做：

<div class="accordion" data-initiallyopen="1">
    <h3>HEADER 1</h3>
    <div class="details">...</div>
    <h3>HEADER 2</h3>
    <div class="details">...</div>
</div>

$(".accordion").accordion({
    active: $(this).data("initiallyopen"),
    collapsible: true,
    heightStyle: "content"
});

不幸的是，这不起作用。没有控制台错误。 $（this）显然不是正确的对象 - 但有没有办法从init中访问手风琴？

Answer 1

在this fiddle中测试，请尝试：

$(".accordion").each(
    function () {
        $(this).accordion( {
            active: $(this).data("initiallyopen"),
            collapsible: true,
            heightStyle: "content"
        })
    }
);

Answer 2

如果你正在使用bootstrap手风琴功能，如果你设置HTML类“崩溃”以及手风琴，你可以选择哪些手风琴是开放的 - 例如：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
</div>

在这个例子中，第二个手风琴将被关闭，因为它的类是“手风琴式塌陷”，而第一个手风琴“手风琴式塌陷”。

如何初始化每个JQuery UI手风琴，以便根据数据标签打开不同的项目？

2 个答案: