7

複数のレベルの編成を含むナビゲーションメニューを作成しようとしています。ネストされたjQueryUIアコーディオンを構築しています。これは、すべてのコンテンツがアコーディオンの最下位レベル（最も深い）のネストにある場合にうまく機能します。問題は、一部の要素にコンテンツとサブアコーディオンが含まれることです。一番上のアコーディオンの横にテキストを配置すると見栄えがします...しかし、タグでラップするとすぐに、その要素のネストされたアコーディオンが壊れます

これが私が写真のモックアップのように見せようとしているもののモック アップです

私の現在のHTML

    <div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>

   <div class="accordian">
           I really want a list here!
        <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
       </div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
         <ul>
                <li>But They</li>
                <li>Do Not</li>
                <li>Work</li>
            </ul>
        <h3><a href="#">A2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
        <h3><a href="#">B2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
    </div>
</div>

Jquery

 $("div.accordian").accordion({
        autoHeight: false,
        collapsible: true,
        active: false

    });

このようにコードを実行すると、最初のセクションに適切なネストされたアコーディオンが生成されますが、2番目のセクションは正しくレンダリングされません。jQueryは、ヘッダーの後に最初のhtml要素を取得して、アコーディオンを構築し始めているようです。

アコーディオンを呼び出すときにヘッダーオプションを次のように指定しました

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false,
    header: 'h3'

});

これにより、目的の効果に近づきます。リストは正しい場所に表示されますが、2番目のセクションのネストされたアコーディオンは機能しません。

フィドルを設定しました

4

2 に答える 2

7

これはうまくいくはずです

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>

   <div class="accordian">
           I really want a list here!
        <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
       </div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div> <-- A Wrapper -->
             <ul>
                    <li>But They</li>
                    <li>Do Not</li>
                    <li>Work</li>
                </ul>
         <div class="accordian">
            <h3><a href="#">A2</a></h3>
            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
            <h3><a href="#">B2</a></h3>
            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
        </div>
    </div>
</div>

デモ:フィドル

タブのTwo場合、別のラッパー要素を作成しul、子accordionをその子として配置する必要があります

于 2013-01-31T01:28:35.033 に答える
3

このフィドルをチェックしてください

ヘッダーの後の次の要素を見るのは正しいので、最上位のアコーディオンのコンテンツを div でラップしてから、サブアコーディオンを含めることができます。

<h3><a href="#">Two</a></h3>

    <div>  <!-- This wrapper -->
        <ul>
            <li>But They</li>
            <li>Do Not</li>
            <li>Work</li>
        </ul>
        <div class="accordian">
             <h3><a href="#">A2</a></h3>

            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
             <h3><a href="#">B2</a></h3>

            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
        </div>
    </div>
于 2013-01-31T01:29:26.077 に答える