JQuery UI Accordion - каждая панель подходит для содержания

Question

Я использую Аккордеон пользовательского интерфейса jQuery http://jqueryui.com/demos/accordion/, и я пытаюсь сделать так, чтобы он соответствовал высоте содержимого каждой панели.

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

Кроме того, есть ли способ сделать одну панель открытой вместо верхней по умолчанию?Мне бы хотелось, чтобы нижняя панель была открыта, когда пользователь загружает страницу.

Заранее спасибо!

РЕДАКТИРОВАТЬ: я пытался поместить height:auto !important; в jquery-ui.cssфайл в .ui-accordion .ui-accordion-content-active, который работает, но приводит к странной проблеме при закрытии аккордеона, когда один остается открытым, в то время как другой открывается.

Answer 1

Для поддержания актуальности кажется, что для jquery UI версии 1.9 autoHeight был заменен на heightStyle. http://api.jqueryui.com/accordion/#option-heightStyle

Способ сделать это после 1.9 будет $( ".selector" ).accordion({ heightStyle: "content"});

autoHeight по-прежнему работает в большинстве случаев, но я столкнулся с трудностями в Chrome и Safari, но не в Firefox, когда использовал autoHeight: false, и мой .ui-accordion-content содержал изображение, высота которого была установлена ​​на auto. Использование heightStyle вместо этого работало намного лучше.

Answer 2

Ааа, узнал, что у них просто есть настройка для этого!http://jqueryui.com/demos/accordion/#no-auto-height

В общем, просто сделайте это: $( ".selector" ).accordion({ autoHeight: false });

Answer 3

Вопрос довольно старый, но теперь у jQuery есть возможность установить высоту в соответствии с содержимым.Больше информации здесь: http://api.jqueryui.com/accordion/#option-heightStyl

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

Answer 4

это работает для меня

$(function () {
        $("#accordion").accordion({
            header: "h3",
            autoFill:true,
            autoHeight: false 
        });
    });