我如何初始化每个JQuery UI手风琴，使他们打开不同的项目取决于数据标签

Question

我试图初始化几个JQuery UI accordion，这些accordion最初打开不同的项目。我不想单独初始化每个手风琴，而是希望将它们全部封装在一个函数中(也为了更容易与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中访问accordion ?

Answer 1

在此测试，尝试:

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

Answer 2

如果你正在使用bootstrap accordion函数，如果你设置了HTML类"collapse in"以及accordion，你可以选择哪些accordion是打开的-例如:

<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>

在这个例子中，第二个手风琴将被关闭，因为它的类是"accordion collapse"，而第一个手风琴的类是"accordion collapse In"。