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

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/