2

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 タグをクリックすると、リストビューが下に展開されます。私がやろうとしているのは、メニューをメニュー h1 タグの上部に展開することです。そのため、メニュー h1 タグはリストビューの下部に表示され、その上にすべてのアイテムが表示されます。

これは、slideUp 効果 (通常は div を非表示にする) を expand イベントにバインドすることと関係があると思いますが、それを理解することはできません!

どんな助けでも大歓迎です。

4

2 に答える 2

3

折りたたみ可能な要素の前に折りたたみ可能なコンテンツを移動してみてください

これは機能しますか？

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>
​
于 2013-01-03T02:27:34.167 に答える
0

私が取り組んでいたプロジェクトの解決策は、ボトムポジションを設定することでした。絶対位置を設定し、下の距離を定義すると、セクションが上に開きます。

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

于 2014-11-12T23:36:56.623 に答える