jquery-ui - 多行多级列表

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 mobile 可理解代码中存在的代码模式。

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