0

我有一些使用 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/

4

2 回答 2

2

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

<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/

于 2012-11-13T03:11:53.967 回答
0

请参阅以下小提琴以获取包含在正确 div 中的代码：http: //jsfiddle.net/ufEyn/2/

$(document).ready(function() {
$('.subaccordion,.accordion1').accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});
于 2012-11-13T02:52:13.163 回答