jQuery Mobile可摺疊列表視圖展開方向向上

Question

我正試圖讓一個jQuery Mobile可摺疊列表視圖向上擴展，而不是默認向下方向。我擁有的列表視圖代碼是：

<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1"> 
<h1>Menu</h1> 
    <ul data-role="listview" id="lvpage1"> 
    <li data-icon="false"><a href="#page2">Page2</a></li> 
    <li data-icon="false"><a href="#page3">Page3</a></li> 
    <li data-icon="false"><a href="#page4">Page4</a></li> 
</ul> 
</div> 

當單擊菜單h1標記時，listview向下擴展。我想要做的是讓菜單擴大菜單h1標籤的頂部，因此Menu h1標籤隨後出現在列表視圖的底部，其上面的所有li項都顯示在列表視圖的底部。

我猜它與將slideUp效果（通常隱藏div）綁定到展開事件有關係，但無法弄清楚！

任何幫助，將不勝感激。

Answer 1

嘗試移動可摺疊內容之前的可摺疊內容

這是行不通的嗎？

• http://jsfiddle.net/SnRx8/

JS：

$('.ui-collapsible-content').insertBefore('#mpage1'); 

HTML

<div data-role="page" class="type-home"> 
    <div data-role="content"> 

<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1"> 
<h1>Menu</h1> 
    <ul data-role="listview" id="lvpage1"> 
    <li data-icon="false"><a href="#page2">Page2</a></li> 
    <li data-icon="false"><a href="#page3">Page3</a></li> 
    <li data-icon="false"><a href="#page4">Page4</a></li> 
</ul> 
</div></div> 
</div> 
​ 

Answer 2

對於我工作的解決方案項目是集底部位置。如果您設置了絕對位置並定義了底部距離，則這些部分將向上打開。

E.g. http://jsfiddle.net/ea4duyfa/

#test-set{ 
position: absolute; 
top: 100px;} 

<div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="test-set"> 
<div data-role="collapsible"> 
    <h3>Section 1</h3> 
<p>I'm the collapsible content for section 1</p> 
</div> 
<div data-role="collapsible"> 
    <h3>Section 2</h3> 
<p>I'm the collapsible content for section 2</p> 
</div> 
<div data-role="collapsible"> 
    <h3>Section 3</h3> 
<p>I'm the collapsible content for section 3</p> 
</div>