Вложенное меню аккордеона в jQuery

У меня есть меню, реализованное с использованием набора вложенных аккордеонов 1 и 2, каждый из которых содержит элементы a и b.

Я хотел бы реализовать следующую логику:

Когда я нажимаю 1a, я получу данные 1a и два подменю 2a, 2b

Когда я нажимаю 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:

Ответы

Ответ 1

Несколько изменений в порядке элементов в вашем 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>