Список с несколькими линиями с несколькими уровнями - PullRequest
Новая
       3

Список с несколькими линиями с несколькими уровнями

1 голос
/ 03 марта 2012

У меня есть три уровня данных на моей странице, и на первом уровне мне нужно отобразить многострочные данные.

Когда у меня только один уровень, мультилинии работают отлично. поэтому следующий код работает хорошо. 

 <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>

И покажи идеальный результат.

enter image description here

Но когда я добавил немного 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>

И это начинает ломаться. И дать результат, как показано ниже. enter image description here

Буду признателен за любую помощь.

Ответы [ 2 ]

0 голосов
/ 03 марта 2012

Похоже, что вложенные теги <ul> в виде списка jQM не работают, так как прямой дочерний элемент не работает. Похоже, что-то в структуре jQuery Mobile удаляет их из представлений списка.

Однако вы можете обернуть теги <ul> вашего ребенка в <div>, который работает и все еще может быть стилизован по вашему вкусу.

Пример: http://jsfiddle.net/shanabus/MVt2B/

0 голосов
/ 03 марта 2012

Попробуйте ссылку ниже и проверьте, используете ли вы правильный синтаксис, возможно, вы не используете шаблон кода, который присутствует в jquery mobile или Jquery mobile понятном коде.

Ссылка: http://jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-nested.html

...