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生成的）手风琴中时，它不起作用。

所以问题仍未解决

将内手风琴变成空手风琴

2 个答案: