具有多个级别的多行的列表

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框架中的某些东西会从列表视图中删除它们。

但是，您可以使用<ul>包裹您的孩子<div>标签，该标签有效并且仍然可以根据您的喜好进行设计。

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