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 に答える