Jquery mobile jQuery移动可折叠列表视图向上展开

我试图让jQuery Mobile可折叠列表视图向上展开，而不是默认的向下展开方向。我拥有的listview代码是：

<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标记的顶部，这样菜单h1标记就会出现在列表视图的底部，上面有所有的li项

我猜这与将slideUp效果（通常隐藏一个div）绑定到expand事件有关，但无法理解

---

任何帮助都将不胜感激。

请尝试在可折叠元素之前移动可折叠内容

这行吗

JS:

HTML

菜单





​

对于我正在进行的一个项目，解决方案是设置底部位置。如果设置绝对位置并定义底部距离，则剖面将向上打开

例如

#测试集{
位置：绝对位置；
顶部：100px；}
第一节
我是第一节的可折叠内容

第二节
我是第2节的可折叠内容

第三节
我是第3节的可折叠内容

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

<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>
​

#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>