jQuery Mobile - Nested Lists(내장된 리스트)

List 아이템 안에 ul 태그나 ol 태그를 사용해 nested list를 만들수 있습니다. 자식 list와 해당 list를 클릭할 때 프레임워크는 헤더에 부모의 제목과 하위 요소의 목록이 채워진 새로운 UI 페이지를 생성합니다. 이런한 동적 nested list는 네비케이션의 보조 레벨로서 b 테마의 스타일을 적용받게 됩니다. List는 여러 레벨의 깊이를 갖을수 있고 모든 페이지와 링크는 프레임웍크에 의해 자동적으로 처리됩니다


<div class="content-primary">   
<ul data-role="listview">
<li>
    <h3>Animals</h3>
    <p>All your favorites from aarkvarks to zebras.</p>
    <ul>
        <li>Pets
            <ul>
                <li><a href="index.html">Canary</a></li>
                <li><a href="index.html">Cat</a></li>
                <li><a href="index.html">Dog</a></li>
                <li><a href="index.html">Gerbil</a></li>
                <li><a href="index.html">Iguana</a></li>
                <li><a href="index.html">Mouse</a></li>
            </ul>
        </li>
        <li>Farm animals
            <ul>
                <li><a href="index.html">Chicken</a></li>
                <li><a href="index.html">Cow</a></li>
                <li><a href="index.html">Duck</a></li>
                <li><a href="index.html">Horse</a></li>
                <li><a href="index.html">Pig</a></li>
                <li><a href="index.html">Sheep</a></li>
            </ul>
        </li>
        <li>Wild animals
            <ul>
                <li><a href="index.html">Aardvark</a></li>
                <li><a href="index.html">Alligator</a></li>
                <li><a href="index.html">Ant</a></li>
                <li><a href="index.html">Bear</a></li>
                <li><a href="index.html">Beaver</a></li>
                <li><a href="index.html">Cougar</a></li>
                <li><a href="index.html">Dingo</a></li>
                <li><a href="index.html">Eagle</a></li>
                <li><a href="index.html">Elephant</a></li>
                <li><a href="index.html">Ferret</a></li>
                <li><a href="index.html">Frog</a></li>
                <li><a href="index.html">Giraffe</a></li>
                <li><a href="index.html">Lion</a></li>
                <li><a href="index.html">Monkey</a></li>
                <li><a href="index.html">Panda bear</a></li>
                <li><a href="index.html">Polar bear</a></li>
                <li><a href="index.html">Tiger</a></li>
                <li><a href="index.html">Zebra</a></li>
            </ul>
        </li>
    </ul>
</li>
<li>

    <h3>Colors</h3>
    <p>Fresh colors from the magic rainbow.</p>
    <ul>
        <li><a href="index.html">Blue</a></li>
        <li><a href="index.html">Green</a></li>
        <li><a href="index.html">Orange</a></li>
        <li><a href="index.html">Purple</a></li>
        <li><a href="index.html">Red</a></li>
        <li><a href="index.html">Yellow</a></li>
        <li><a href="index.html">Violet</a></li>
    </ul>
</li>
<li>
    <h3>Vehicles</h3>
    <p>Everything from cars to planes.</p>    
    <ul>
        <li>Cars
            <ul>
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
                <li><a href="index.html">GMC</a></li>
                <li><a href="index.html">Honda</a></li>
                <li><a href="index.html">Hyundai</a></li>
                <li><a href="index.html">Infiniti</a></li>
                <li><a href="index.html">Jeep</a></li>
                <li><a href="index.html">Kia</a></li>
                <li><a href="index.html">Lexus</a></li>
                <li><a href="index.html">Mini</a></li>
                <li><a href="index.html">Nissan</a></li>
                <li><a href="index.html">Porsche</a></li>
                <li><a href="index.html">Subaru</a></li>
                <li><a href="index.html">Toyota</a></li>
                <li><a href="index.html">Volkswagon</a></li>
                <li><a href="index.html">Volvo</a></li>
            </ul>
        </li>
        <li>Planes
            <ul>
                <li><a href="index.html">Boeing</a></li>
                <li><a href="index.html">Cessna</a></li>
                <li><a href="index.html">Derringer</a></li>
                <li><a href="index.html">Embraer</a></li>
                <li><a href="index.html">Gulfstream</a></li>
                <li><a href="index.html">Piper Aircraft</a></li>
                <li><a href="index.html">Raytheon</a></li>
            </ul>
        </li>
        <li>Construction
            <ul>
                <li><a href="index.html">Caterpillar</a></li>
                <li><a href="index.html">Ford</a></li>
                <li><a href="index.html">John Deere</a></li>
            </ul>
        </li>               
    </ul>
</li>
</ul>
</div><!--/content-primary -->