javascript - 将内部 Accordion 创建为空 Accordion

Question

我在使用内部 Accordion 时遇到问题:添加一些面板后刷新 Accordion 的 destroy-recreate 方法无法正常工作。

当我单击第二个 Accordion 中的按钮时，它会在其中添加一个部分。但是子 Accordion 不起作用(尽管对 Accordion 进行了破坏重建)。您可以在此处查看代码并进行测试: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});

<小时/>

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