Question

我正在开发一个有动态生成的常见问题解答的网站，我正试图让嵌套的手风琴工作。问题是，只有第一个问题集合才能进入ui-accordion课程。

（我刚刚复制了页面的来源并删除了大部分文本）

我做错了什么？

Answer 1

您已将相同的ID分配给多个div。请尝试以下方法：

<强> HTML

<h1>Frequently Asked Questions</h1>

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>
    <div class="accordian">
        <h3><a href="#">A</a></h3>
        <div>AAAAAAAAAA</div>
        <h3><a href="#">B</a></h3>
        <div>BBBBBBBBBB</div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
        <h3><a href="#">A2</a></h3>
        <div>AAAAAAAAAA2</div>
        <h3><a href="#">B2</a></h3>
        <div>BBBBBBBBBB2</div>
    </div>
</div>

<强>的JavaScript

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

链接到示例：http://jsfiddle.net/SmFdt/1/

Answer 2

试试这个http://jsfiddle.net/SmFdt/3/

它无法正常工作的原因是你为多个div使用相同的id。我已将ID更改为类。

在旁注中，您有很多代码可以显示手风琴。您可能想要考虑减少一些代码。（例如<p>内不需要<div>。您可以使用CSS边距和填充属性控制间距。）

jQueryUI嵌套的手风琴只在第一个子列表上工作

2 个答案: