列出具有多个级别的多行

Question

我的页面中有三个级别的数据，第一级需要显示多行数据。

当我只有一个级别的多线完美。所以下面的代码运行良好。

<ul data-role="listview" 
    data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e"> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>150 EUR</h4> 
       <p>12:50 to 14:15 (1h25) Direct</p> 
      </li> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>175 EUR</h4> 
       <p>15:00 to 16:15 (1h15) Direct</p> 
      </li> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>225 EUR</h4> 
       <p>16:00 to 20:00 (4h) wait 2h Frankfurt, Germany</p> 
      </li> 
     </ul> 

并显示完美的结果。

但是当我添加一些UL显示嵌套东西的事情开始打破。

我提出以下几行。

 <ul data-role="listview" data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e"> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>150 EUR</h4> 
       <p>12:50 to 14:15 (1h25) Direct</p> 
       <ul> 
        <li><a href="#">View</a></li> 
        <li><a href="#">Submit</a></li> 
        <li><a href="#">Reset</a></li> 
       </ul> 
      </li> 
      </UL> 

它开始打破。并给出如下结果。

任何帮助，将不胜感激。

Answer 1

尝试下面的链接，并检查您是否使用正确的语法，也许可能你没有使用jquery mobile或jquery移动可理解代码中存在的代码模式。

链接：http://jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-nested.html

Answer 2

它看起来像一个JQM列表视图作为直接子不工作嵌套<ul>标签。它看起来像jQuery Mobile框架中的东西从列表视图中删除。

但是，您可以用<div>包裹您的孩子<ul>标签，该标签可以正常工作，并且仍然可以根据自己的喜好进行设计。

例如：http://jsfiddle.net/shanabus/MVt2B/