#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) аккордеон.
Итак, проблема все еще не решена