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

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

введите здесь описание изображения

проверьте здесь: http://jsfiddle.net/A9rKm/11/

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

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

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

ОБНОВЛЕНИЕ: Кажется, это можно сделать с помощью плагина Accordion, о котором я не знал! Но я скорее узнаю, как кодировать это с нуля, поэтому, на мой взгляд, этот вопрос не должен закрываться.

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


toggle jquery ajax collapse expand
person Rubytastic    schedule 28.02.2012    source источник
comment
Это называется Аккордеон, для этого есть бесчисленное множество плагинов. Если не использовать их, вы можете хотя бы посмотреть исходный код, чтобы увидеть, что они сделали.   -  person Madara's Ghost    schedule 28.02.2012
comment
Ах, я не знал, что я начал создавать этот функционал с самого начала. Позор, что за это проголосовали, интересно, как научиться делать это самому, хотя есть примеры!   -  person Rubytastic    schedule 28.02.2012
comment
За это не проголосовали (надеюсь), но увидеть (и понять), что они сделали с примерами, — хороший способ понять функциональность и создать ее самостоятельно.   -  person Madara's Ghost    schedule 28.02.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

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

person TimCodes.NET    schedule 28.02.2012

arrow_upward
0
arrow_downward

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

person Rubytastic    schedule 28.02.2012