jQuery 모바일 아코디언 위젯 자동 높이가 작동하지 않습니다.

Question

jQuery 버전 1.7.1 및 jQueryMobile 버전 1.1.1에서 jQuery Mobile 아코디언 위젯을 사용하고 있습니다. 아코디언을 확장하면 고정 된 공간을 차지하여 페이지의 나머지 부분이 여기 아래의 데모처럼 아래로 스크롤되지 않도록하십시오. http://jqueryui.com/accordion/#default

jQuery의 'accordion'옵션을 사용해 보았지만 그것들은 다르다고합니다. 지금과 같이 아코디언 패널은 내용에 따라 크기가 바뀌므로 아코디언 아래의 내용이 끊임없이 바뀝니다.

<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 U 아코디언과 jQuery 모바일 아코디언을 혼동하지 마십시오. 공통점이 없습니다.

jQuery를 모바일 아코디언 일부 CSS를 변경하여 고정 된 높이를 사용하도록 강제 할 수 있습니다

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

라이브 jsFiddle 예 : http://jsfiddle.net/Gajotres/YvhLk/

오버 플로우-Y를 제거합니다! 중요 스크롤; 스크롤 막대를 원하지 않으면을 입력하십시오.