1

私はjQueryモバイルサイトに取り組んでいます。これはPhoneGapを使用してAndroidアプリに変換されます。

折りたたみ可能な見出しの下に、車のリストがあります。ボートや飛行機などの乗り物の他のリストがあるかもしれません。

私が達成したいのは、その個々のリストアイテムのアコーディオン機能です。たとえば、誰かがAudiをクリックすると、その特定の車に関する情報がドロップダウンします。（現時点では、リンクは外部ページに移動します。）

これを達成するための「公式」または「最良の」方法は何ですか？

私のコードは以下のとおりですが、ここのjsFiddleにも入れています。航空母艦のリンクの下にあるテキストは、おおよそ私が達成しようとしている機能ですが、そのリスト項目をクリックしたときにのみ表示されます。

            <div data-role="collapsible" data-theme="b" data-content-theme="c">
            <h2>Choose a car model...</h2>
            <ul data-role="listview">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>

            </ul>
        </div>

            <div data-role="collapsible" data-theme="b" data-content-theme="c">
            <h2>Choose a boat model...</h2>
            <ul data-role="listview">
                <li><a href="index.html">Speedboat</a></li>
                <li><a href="index.html">Aircraft Carrier</a></li>
                                    <p><br />test info</p>
            </ul>
        </div>
4

1 に答える 1

2

これが実際の例です：http：//jsfiddle.net/Gajotres/eELYZ/

li要素からタグを削除するだけで済みます。これは読み取り専用リストビューと呼ばれます：http：//jquerymobile.com/demos/1.2.0/docs/lists/lists-readonly.html

<ul data-role="listview">
    <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </li>
    <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </li>        
</ul>

編集 ：

<div data-role="collapsible" data-theme="b" data-content-theme="c" id="outer-collapsible">
    <h2>Choose a boat model...</h2>    
    <div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible">
        <h2>Choose a boat model...</h2>    
        <ul data-role="listview">
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>        
        </ul>
    </div>
    <div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible">
        <h2>Choose a boat model...</h2>    
        <ul data-role="listview">
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>        
        </ul>
    </div>    
</div>

新しい作業例： http： //jsfiddle.net/Gajotres/eELYZ/

于 2013-03-27T13:29:18.533 に答える