Создание внутренних аккордеонов в пустом аккордеоне - PullRequest
Новая
       43

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

1 голос
/ 20 мая 2011

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

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

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

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

<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>

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

<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>

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

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

Ответы [ 2 ]

0 голосов
/ 23 мая 2011

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

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

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

Вот код и демо: http://jsfiddle.net/YL99D/4/

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

Так что проблема до сих пор не решена

0 голосов
/ 21 мая 2011

Аккордеон обновляет 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/

...