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

时间:2011-12-31 04:43:00

标签: jquery-ui jquery-ui-accordion

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

这是我的代码: http://jsfiddle.net/SmFdt/

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

我做错了什么?

2 个答案:

答案 0 :(得分:14)

您已将相同的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/

答案 1 :(得分:0)

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

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

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