Question

我正在开发一个jQuery移动网站，该网站将通过PhoneGap转换为Android应用。

我有一个汽车列表，在一个可折叠的标题下。我可能还有其他列表，包括船只或飞机等车辆。

我希望能够实现的是单个列表项目上的手风琴功能，例如，某人可能会点击奥迪，并且会显示有关该特定车辆的信息。（目前，该链接转到外部页面。）

实现这一目标的“官方”或“最佳”方式是什么？

我的代码如下，但我也把它放在jsFiddle here中。航空母舰链接下面的文字大致是我想要实现的功能，但它只应在点击该列表项时显示。

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

Answer 1

以下是一个有效的例子：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/

使用jQuery mobile创建带有手风琴式列表项的列表

1 个答案: