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

Question

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

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

Итак, основная идея для улучшения:

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

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

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

ОБНОВЛЕНИЕ2: Кто-нибудь порекомендует определенный плагин для аккордеона, чтобы взглянуть на то, как он написан и учиться?

Answer 1

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

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

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

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

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

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

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

7. Протестируйте его во всех мыслимых браузерах, такие функции часто могут работать неправильно, особенно в IE

Answer 2

Я исправил это, добавив час взлома и исследования, теперь он отлично работает :) Спасибо за предложения.