jQuery Мобильный виджет-аккордеон автоматически не работает

Question

Я использую виджет jQuery для мобильного аккордеона с jQuery версии 1.7.1 и jQueryMobile версии 1.1.1. Я бы хотел, чтобы аккордеон, когда он расширялся, занимал фиксированное пространство, чтобы остальная часть страницы не прокручивалась вниз, так же как и демо: http://jqueryui.com/accordion/#default

Я попытался использовать опции «accordion» из jQuery, но кажется, что они разные. Как и сейчас, панели аккордеона меняют размер в зависимости от контента и, следовательно, содержание под аккордеон постоянно меняется.

Вот мой код:

<div data-role="collapsible-set"> 
    <div data-role="collapsible"> 
     <h3>Title 1</h3> 
     <p>[content 1: very long]</p> 
    </div> 
    <div data-role="collapsible"> 
     <h3>Title 2</h3> 
     <p>[content 2: normal length]</p> 
    </div> 
    <div data-role="collapsible"> 
     <h3>Title 3</h3> 
     <p>[content 3: short]</p> 
    </div> 
    <div data-role="collapsible"> 
     <h3>Title 4</h3> 
     <p>[content 4: short]</p> 
    </div> 
</div> 

Спасибо!

Answer 1

Не путайте аккордеон jQuery Ui с мобильным аккордеоне jQuery, у них нет ничего общего.

JQuery Mobile аккордеон может быть вынужден использовать фиксированную высоту, с некоторыми изменениями CSS:

.ui-collapsible-content { 
    height: 50px !important; 
    overflow-y:scroll !important; 
} 

Живая jsFiddle пример: http://jsfiddle.net/Gajotres/YvhLk/

Удалить переполнение-у: прокручивать важно;, если вы не хотите полосу прокрутки.