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

我对内部手风琴有一个问题：在添加一些面板后刷新手风琴的销毁-重新创建方法无法正常工作

当我在第二个手风琴上点击按钮时，它会在其中添加一个部分。但次手风琴不起作用（尽管手风琴已被重建）。 您可以在此处查看代码并进行测试：

但是，如果我通过在#sections div中添加一个初始节来修改HTML代码，那么当我单击按钮（这里的代码和演示：）时，它可以完美地工作

我还研究了使用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> 

章节内容：


亚手风琴内容

结果是课程设置得很糟糕。 有人知道是什么导致了这个问题吗

---

[编辑]：完全重新措辞

仅在启动时更新css，而不是在动态添加内容时更新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});

var-activeEl=$（“#问题”）.accordion（'option'，'active'）；
$（“#问题”）。附加（“”）；
$（“#问题”）。追加（'bar'）；
$（#问题”）.accordion（'destroy'）.accordion（{active:activeEl}）；

---

增加：

---

顺便说一句，这里有一个例子：编辑：我找到了问题的根源。

以下是代码和演示：

如果你有我遇到过的同样的问题，请注意在手风琴真正存在并且不是空的时候创作手风琴。否则，它似乎会导致许多问题。 此外，我使用对象来存储accordios的选项，而不是使用data（）方法。因此，即使在加载DOM后添加HTML元素，accordions似乎也会以正常的方式做出反应

---

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

以下是代码和演示：

但当我们将子手风琴添加到现有（不是javascript生成的）手风琴中时，它不起作用

---

所以问题仍然没有解决

你能说得更具体一点吗？你上面的代码是零碎的，所以我在对你的代码如何工作进行一些基本假设。我试图简化我的基本示例：我在这里也尝试过你的解决方案：但我不工作（除非我做错了什么）。哇。嗯。。。。你的选择器太高了，这实际上是你的问题。你的核心选择器坏了。这是我的小提琴，它是你的一把叉子，突出了所有大写字母中的三角形：是的，选择器可能是buggy，我的错。我没有很好地将代码转换成一个更简单的代码。但是你的小提琴上有几句话。你说“你不能同时使用包装袋和手风琴”，但我们可以。这就是为什么我在手风琴数据中使用

标题：“>div>h3”

选项；）此外，在you fiddle中，您取消了对

的注释，但这正是我不希望看到的，否则它看起来与我在问题中提出的非常相似。即使

sections

div为空，我也希望生成节：）我已经完全重新表述了我的问题，并添加了一些信息，如果可以帮助您的话；）