11

ネストされたアコーディオンのセットを使用して実装されたメニューが1あり2、それぞれに要素がaありbます。

次のロジックを実装したいと思います。

  • をクリックすると、と 2 つのサブメニューの1aデータが取得されます。1a2a2b

  • をクリックすると2a、2bそれぞれのデータを取得します。

問題

望ましい結果:

  • nth-most最後のクリックの子要素のみを表示し、他のすべてを折りたたみます。
  • 初期化時には、 と のみ1aが1b表示されます。

現在の結果:

  • をクリックして1bから をクリックし2bて1bも、完全に表示されます。

JavaScript コード

$(document).ready(function() {
    $("#acc1").accordion({
        active:".ui-accordion-left",
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc1',
        clearStyle: true
    });
    $("#acc2").accordion({
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc2',
        clearStyle: true
    });
});

HTML:

<ul id="acc1" class="ui-accordion-container">
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1a
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1a<br/>
            data of 1a<br/>
            data of 1a<br/>
        </div>
        <div>
            <ul class="ui-accordion-container" id="acc2">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2a
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2a<br/>
                        data of 2a<br/>
                        data of 2a<br/>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2b<br/>
                        data of 2b<br/>
                        data of 2b<br/>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1b<br />
            data of 1b<br />
            dta of 1b <br />
        </div>
    </li>
</ul>
4

1 に答える 1

11

HTML内の要素の順序を少し変更するだけで、探している動作が得られます。開始時には、1aと1bのみが開いています。同様に、1bをクリックすると、1aが閉じ、開いている2a/2bセクションも非表示になります。

    $(document).ready(function() {
        $("#acc1").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true
        });
        $("#acc2").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc2',
            clearStyle: true
        });
    });

    <ul id="acc1" class="ui-accordion-container">
        <li>
            <div class="ui-accordion-left">
            </div>
            <a class="ui-accordion-link acc1">1a
                <span class="ui-accordion-right"></span>
            </a>
            <div>
                data of 1a<br/>
                data of 1a<br/>
                data of 1a<br/>
                <ul class="ui-accordion-container" id="acc2">
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2a
                            <span class="ui-accordion-right"></span>
                        </a>
                        <div>
                            data of 2a<br/>
                            data of 2a<br/>
                            data of 2a<br/>
                        </div>
                    </li>
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span></a>
                        <div>
                            data of 2b<br/>
                            data of 2b<br/>
                            data of 2b<br/>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="ui-accordion-left"></div>
            <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span></a>
            <div>
                data of 1b<br />
                data of 1b<br />
                dta of 1b <br />
            </div>
        </li>
    </ul>
</body>
于 2009-02-05T20:40:36.080 に答える