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
});

jquery ui：嵌套的手风琴全都搞砸了

2 个答案: