Как добавить переход на разворот/сбой?
Добавить переход CSS3 expand/collapse
Ответ 1
Это мое решение, которое автоматически настраивает высоту: http://jsfiddle.net/9ccjE/
Я использовал обходной путь, который размещал r3bel: Можете ли вы использовать CSS3 для перехода с высоты: 0 на переменную высоту содержимого?
Ответ 2
это должно сработать, пришлось попробовать тоже время..: D
Ответ 3
http://jsfiddle.net/Bq6eK/215/
Я не изменял ваш код для этого решения, вместо этого я написал свой собственный. Мое решение не совсем то, о чем вы просили, но, возможно, вы могли бы использовать его с существующими знаниями. Я также прокомментировал код, чтобы вы знали, что именно я делаю с изменениями.
Как решение "избегать установки высоты в JavaScript", я просто сделал параметр "maxHeight" в функции JS, называемой toggleHeight. Теперь он может быть установлен в HTML для каждого расширяемого класса div.
Я скажу это заранее, я не очень опытен с внешними языками, и есть проблема, когда мне нужно дважды щелкнуть кнопку "Показать/скрыть" дважды до начала анимации. Я подозреваю, что это проблема с фокусом.
Другая проблема с моим решением заключается в том, что вы можете фактически выяснить, что скрытый текст не нажимает кнопку show/hide, просто нажав в div и перетащив вниз, вы можете выделить текст, который не отображается, и вставить его в видимое пространство.
Мое предложение о следующем шаге в дополнение к тому, что я сделал, это сделать так, чтобы кнопка show/hide изменялась динамически. Я думаю, вы можете понять, как это сделать с тем, что вы уже знаете о том, как показывать и скрывать текст с помощью JS.
Ответ 4
Здесь решение, которое вообще не использует JS. Вместо этого он использует флажки.
Вы можете скрыть этот флажок, добавив это в свой CSS:
.container input{
display: none;
}
Затем добавьте стиль, чтобы он выглядел как кнопка .