1

我正在开发一个 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>
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 回答