jquery-mobile - jQuery Mobile 可折叠 ListView 向上展开

Question

我试图让 jQuery Mobile 可折叠 ListView 向上展开，而不是默认的向下方向。我拥有的 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 标记然后出现在 ListView 的底部，上面的所有 li 项目。

我猜它与将 slideUp 效果(通常隐藏一个 div)绑定(bind)到展开事件有关，但无法弄清楚!

任何帮助，将不胜感激。

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