jquery ui:嵌套手风琴都搞砸了

Question

我有一些使用 php 生成的代码。它输出嵌套手风琴。由于某种原因，手风琴看起来非常搞砸.如此之多，以至于我什至无法解释。下面是生成的代码：

<div class='accordion'>
    <h3>2012</h3>
    <div class='accordion'>
        <h3>October 2012</h3>
        <div>October 5, 2012</div>
        <div>October 5, 2012</div>
        <div>October 4, 2012</div>
        <div>October 4, 2012</div>
        <div>October 4, 2012</div>
        <div>October 3, 2012</div>
        <div>October 3, 2012</div>
        <div>October 3, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
    </div>
    <div class='accordion'>
        <h3>September 2012</h3>
        <div>September 30, 2012</div>
        <div>September 29, 2012</div>
        <div>September 29, 2012</div>
        <div>September 26, 2012</div>
        <div>September 26, 2012</div>
        <div>September 25, 2012</div>
        <div>September 24, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 11, 2012</div>
        <div>September 5, 2012</div>
    </div>
    <div class='accordion'>
        <h3>August 2012</h3>
        <div>August 19, 2012</div>
        <div>August 17, 2012</div>
        <div>August 9, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 2, 2012</div>
    </div>
    <div class='accordion'>
        <h3>July 2012</h3>
        <div>July 1, 2012</div>
        <div>July 1, 2012</div>
    </div>
</div>

我用以下方法称呼它：

$(document).ready(function(){
    $('div.accordion').accordion({
            autoHeight:false,
            collapsible:true,
            active:false});
});

这看起来应该有效。要查看它正在做什么，请转到：http://lonewolfdigital.com/misc/test/

Answer 1

手风琴有一个标题..然后是内容..所以你想要的是这个结构

<div class='accordion'> <!-- tells its an accordion -->
     <h3>2012</h3> <!-- this is the first heading  -->
    <div class='accordion'> <!-- tells its another accordion  -->
         <h3>October 2012</h3> <!-- first heading  -->
        <div> <!-- the headings content - only one content per heading and so on  -->
            <div>October 5, 2012</div>
            <div>October 5, 2012</div>
            <div>October 4, 2012</div>
            <div>October 4, 2012</div>
            <div>October 4, 2012</div>
            <div>October 3, 2012</div>
            <div>October 3, 2012</div>
            <div>October 3, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
        </div>
         <h3>September 2012</h3>
        <div>
            <div>September 30, 2012</div>
            <div>September 29, 2012</div>
            <div>September 29, 2012</div>
            <div>September 26, 2012</div>
            <div>September 26, 2012</div>
            <div>September 25, 2012</div>
            <div>September 24, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 11, 2012</div>
            <div>September 5, 2012</div>
        </div>
         <h3>August 2012</h3>
        <div>
            <div>August 19, 2012</div>
            <div>August 17, 2012</div>
            <div>August 9, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 2, 2012</div>
        </div>
         <h3>July 2012</h3>
        <div>
            <div>July 1, 2012</div>
            <div>July 1, 2012</div>
        </div>
    </div>​
</div>

http://jsfiddle.net/c8qW3/

Answer 2

请参阅以下小提琴，了解包装在正确div 中的代码：http://jsfiddle.net/ufEyn/2/

$(document).ready(function() {
$('.subaccordion,.accordion1').accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});