совет/мозговой штурм по переписыванию и очистке развернуть/свернуть коробку

Question

Мне хотелось бы попросить совета по очистке какого-либо простого расширяющегося и обрушившегося содержимого. Я потратил некоторое время на то, чтобы получить несколько идей, но мне не нравится сложность html и думаю, что было бы неплохо загрузить контент true ajax.

пожалуйста, проверьте здесь: http://jsfiddle.net/A9rKm/11/

Так основная идея, чтобы улучшить это:

• у вас есть свернутый флажок, по щелчку он расширяется и загружает
• имеющий 2 состояния , 1 рухнул и 1 расширился и переключился между ними, удалив внутренние div div (расширенный div в сложенном div)
• На расширенной нагрузке переключения в содержимом true ajax * действительно хотите удалить расширенный div внутри скомпенсированного div, кто-нибудь знает, как это можно сделать? Спасибо!

Любая идея об улучшении очистки html и уменьшении количества HTML-страниц внутри страницы путем загрузки содержимого для расширенного состояния?

UPDATE: Кажется, это можно сделать с помощью плагина Accordion, который я не знал! Но я гораздо лучше узнать, как закодировать это с нуля для этого, на мой взгляд, этот вопрос не должен закрывать

UPDATE2: Любой рекомендовать определенный аккордеона плагин, чтобы посмотреть на то, как его написал и учиться?

Answer 1

Поскольку кажется, что вы хотите узнать, как это сделать, я бы не рекомендовал подключать плагин и оставить его. Иногда лучше понять, как все работает. Ваши основные шаги будут такими:

1. Решите, что такое семантическая разметка для контроля. Если вы расширили все состояния и отключили CSS, как бы это выглядело?

2. Начинать со всех предметов рухнул. Убедитесь, что правила CSS скрывают какой-либо внутренний контент от пользователя во время его загрузки с использованием видимости: скрытый, отображение: нет или высота: 0 или комбинация).

3. Обращайтесь с кликом по элементу, используя jQuery .click(). В этом обработчике событий вам понадобится вызов соответствующего результата ajax, будь то JSON, HTML-страница или что-то еще, используя jQuery's .ajax().

4. В обработчике событий успеха в вызове ajax вам необходимо добавить результат к содержимому элемента.

5. Animate содержательная элемента на полную высоту, а затем исчезать его.

6. На второй клик, вы будете делать обратное, и когда анимация завершается вы можете скрыть содержимое, или удалить его. Я бы рекомендовал скрывать его, поэтому вам не нужно снова получать одни и те же данные.

7. Test его в каждом браузере можно себе представить, этот вид функциональности часто может пойти не так, особенно в IE

Answer 2

Я получил его фиксированной, добавив час хакерство и исследования, его теперь работает большой :) ТНХ для предложений.