使用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/