Using Nested Lists

<ul data-role="listview" >   <li>Hobbits<ul><li>Frodo</li><li>Sam</li>     <li>Bilbo</li></ul></li>   <li>Elves<ul><li>Legolas</li><li>Elrond</li>     <li>Galadriel</li></ul></li>   <li>Men<ul><li>Aragorn</li><li>Boromir</li>     <li>Theoden</li></ul></li> </ul>

Nested lists are created by nesting additional <ul> elements inside the listview. jQuery Mobile automatically detects this and builds up linkable pages to the sublists. The following code shows an example of implementing nested lists, as shown in Figure 14.5:

01 <html> 02 <head> 03   <title>Python Phrasebook</title> 04   <meta charset="utf-8" /> 05   <meta name="viewport" content="width=device-width,

Get jQuery and JavaScript Phrasebook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.