将内部手风琴创建为空手风琴

Question

我对内部手风琴有一个问题：添加一些面板后刷新手风琴的 destroy-recreate 方法无法正常工作。

当我单击第二个手风琴中的按钮时，它会在其中添加一个部分。但是子手风琴不起作用（尽管对手风琴进行了破坏重建）。 您可以在此处查看代码并进行测试： http://jsfiddle.net/YL99D/2/

但是，如果我通过在 #sections div 中添加初始部分来修改 HTML 代码，那么当我单击按钮时它会完美地工作（此处的代码和演示：http://jsfiddle.net/YL99D/3/ ）

我还查看了使用 Firebug 生成的 HTML 代码，发现了一些有趣的东西。 首先看一下当我在 #sections div 中放置硬编码部分时生成的代码：

<div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div>
                    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-hover" role="tab" aria-expanded="false" aria-selected="false" tabindex="0">
                        <span class="ui-icon ui-icon-triangle-1-e"></span>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div> 

现在看一下当我让 #sections div 为空时生成的代码：

<div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-hover" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                    <h3>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div>Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div> 

结果是类设置错误。 有人知道是什么导致了这个问题吗？

[编辑]：完整改写

Answer 1

Accordion 仅在启动时更新 css，而不是在动态添加内容时更新。当您想要添加（或减去）某些内容时，最好的选择可能是执行以下操作：

var activeEl = $('#questions').accordion('option','active');

$('#questions').append('<h3><a href="#">foo</a></h3>');
$('#questions').append('<div>bar</div>');

$('#questions').accordion('destroy').accordion({active:activeEl});

---

添加：
顺便说一句，这里是一个小提琴示例： http://jsfiddle.net/NkVQJ/

Answer 2

编辑：我找到了问题的根源。
以下是代码和演示： http://jsfiddle.net/YL99D/5/

如果您有我遇到过同样的问题，当手风琴确实存在并且不为空时，请注意创建它们。否则似乎会引起很多问题。
此外，我使用对象来存储手风琴的选项，而不是使用方法 data()。因此，即使在加载 DOM 后添加 HTML 元素，手风琴似乎也会以正常方式做出反应。

---

我已经部分找到了解决方案。无需定义与选择器相关的数据，只需定义包含选项的对象即可。

以下是代码和演示： http://jsfiddle.net/YL99D/4/

但确实如此当我们将子手风琴添加到现有的（不是 javascript 生成的）手风琴中时，该功能不起作用。

所以问题还是没有解决