Блог

Главная - Вопросы по программированию - Создание внутренних аккордеонов в пустой аккордеон

Создание внутренних аккордеонов в пустой аккордеон

#javascript #jquery #jquery-ui #jquery-ui-accordion #jquery-ui-sortable

#javascript #jquery #jquery-пользовательский интерфейс #jquery-пользовательский интерфейс-аккордеон #jquery-ui-сортируемый

Вопрос:

У меня проблема с внутренними аккордеонами: метод уничтожения-воссоздания для обновления аккордеона после добавления некоторых панелей работает некорректно.

Когда я нажимаю на кнопку во втором аккордеоне, он добавляет в него раздел. Но вспомогательный аккордеон не работает (несмотря на разрушение-воссоздание аккордеона). Вы можете посмотреть код и протестировать его здесь : http://jsfiddle.net/YL99D/2 /

НО если я изменю HTML-код, добавив начальный раздел в #sections div, он отлично работает при нажатии кнопки (Код и демонстрация здесь :http://jsfiddle.net/YL99D/3 / )

Я также просмотрел сгенерированные HTML-коды с помощью Firebug и нашел кое-что интересное. Сначала взгляните на код, сгенерированный, когда я поместил жестко запрограммированный раздел в #sections div :

 <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div>
                    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-hover" role="tab" aria-expanded="false" aria-selected="false" tabindex="0">
                        <span class="ui-icon ui-icon-triangle-1-e"></span>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div>

Теперь посмотрите на код, сгенерированный, когда я оставляю #sections div пустым :

 <div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-hover" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                    <h3>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div>Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div>

Результатом является то, что классы неправильно настроены.
У кого-нибудь есть представление о том, что вызывает эту проблему?

[РЕДАКТИРОВАТЬ] : Полное перефразирование

Ответ №1:

Accordion обновляет css только при запуске, а не когда вы добавляете к нему что-то динамически. Возможно, вам лучше всего сделать что-то подобное, когда вы хотите что-то добавить (или вычесть):

 var activeEl = $('#questions').accordion('option','active');

$('#questions').append('<h3><a href="#">foo</a></h3>');
$('#questions').append('<div>bar</div>');

$('#questions').accordion('destroy').accordion({active:activeEl});

Добавлено:
Вот, кстати, пример скрипки: http://jsfiddle.net/NkVQJ /

Комментарии:

1. Не могли бы вы выразиться более конкретно? Ваш верхний код фрагментирован, поэтому я отталкиваюсь от некоторых базовых предположений о том, как работает ваш код.

2. Я попытался упростить свой базовый пример: jsfiddle.net/435bD/6 Я также попробовал ваше решение здесь: jsfiddle.net/435bD/7 Но I не работает (если я не сделал что-то не так)

3. Вау. Гм…. Ваши селекторы перегружены, что на самом деле было вашей проблемой. Ваш основной селектор был заблокирован. Вот мой fiddle, который является вашим форком и выделяет дельты всеми заглавными буквами: jsfiddle.net/2NqQJ

4. Да, селекторы, где, вероятно, глючат, по моей вине. Я не очень хорошо преобразовал свой код в более простой. Но всего лишь пара замечаний из вашей скрипки. Вы сказали «вы не можете использовать div-оболочку и Accordion одновременно», но мы можем. Вот почему я использую header: "> div > h3" опцию в данных аккордеона 😉 Более того, в вашей скрипке вы раскомментировали <div id="sections_new1"> , но это то, чего я бы не хотел иметь, иначе это выглядит очень похоже на то, что я предложил в своем вопросе. Я хочу генерировать разделы, даже когда sections div пуст 🙂

5. Я полностью перефразировал свой вопрос и добавил некоторую информацию, если это может вам помочь 😉

Ответ №2:

РЕДАКТИРОВАТЬ: Я нашел источник проблемы. Вот код и демонстрация : http://jsfiddle.net/YL99D/5 /

Если у вас та же проблема, что и у меня, позаботьтесь о создании аккордеонов, когда они действительно существуют и не являются пустыми. В противном случае, похоже, это вызывает много проблем. Более того, я использовал объекты для хранения параметров аккордеонов, вместо того чтобы использовать метод data(). Таким образом, аккордеоны, похоже, реагируют обычным образом даже после добавления HTML-элементов после загрузки DOM.

Я частично нашел решение. Вместо определения данных, связанных с селекторами, просто определите объекты, которые содержат опции.

Вот код и демонстрация : http://jsfiddle.net/YL99D/4 /

НО это не работает, когда мы добавляем вспомогательный аккордеон в существующий (не созданный javascript) аккордеон.

Итак, проблема все еще не решена