Аккордеон jQuery ‘height: auto’ вызывает сбой анимации

#jquery #animation #accordion

#jquery #Анимация #аккордеон

Вопрос:

Я использую аккордеон jQuery, и я хочу, чтобы каждый раздел мог динамически изменять размер в соответствии с внутренним содержимым. Поэтому я установил стиль .ui-accordion-content-active на ‘height: auto’. Это работает, пока активен один конкретный раздел; он изменяется правильно, чтобы вместить содержимое внутри него.

Однако свойство height, похоже, влияет на анимацию при выборе разных разделов аккордеона. Похоже, что он начинает скользить, но автоматическая высота берет верх, и оба раздела на короткое время полностью открыты, и, наконец, ранее активный закрывается.

Похоже, должен быть правильный способ заставить div содержимого Accordion динамически изменять размер, не влияя на анимацию. Я был бы признателен за любые советы, спасибо!

Ответ №1:

Под тегом Script напишите приведенный ниже код.

 $(function() {
 $( "#accordion" ).accordion({
  heightStyle: "content"
  autoHeight: false
 });
});
  

:)-

Ответ №2:

Вы проверили разметку из демо-версии без автоматической высоты на сайте пользовательского интерфейса jQuery? Кажется, он делает именно то, что вы просите.

http://jqueryui.com/demos/accordion/#no-auto-height

Комментарии:

1. Я пробовал это; это работает изначально, но раздел Accordion не будет динамически изменять размер, если содержимое внутри него становится длиннее (например, раздел accordion содержит расширяемую файловую иерархию). Возможно, я смогу использовать событие accordionchange для переключения «высота: авто».

2. Итак, вы добавляете разметку внутри аккордеона? Возможно, вам нужно повторно инициализировать аккордеон после добавления разметки, чтобы он получил правильную высоту. Или в аккордеоне есть функция отображения / скрытия? В этом случае вам может понадобиться функция для получения высоты внутреннего содержимого и применения ее к высоте раздела аккордеона.

3. Интересно, что я обнаружил, что установка fillSpace в false устраняет мою проблему. Я предполагаю, что fillSpace не только заставляет аккордеон заполнять высоту своего родителя, но и ограничивает его этой высотой. При отключенном заполнении он может свободно расширяться по мере добавления нового содержимого к внутренним разделам.