how to make nested list in slide panel?

问题

Can you please tell me how to make a nested list in slide panel in jQuery? I am able to make a slide panel, but I want to make nested list in left panel in jQuery.

http://jsfiddle.net/qUMbC/31/

can we make nested list in slide panel ?

<div data-role="page" class="jqm-demos" data-quicklinks="true">
    <div data-role="header">
            <h1>External panels</h1>

    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">  <a href="#externalpanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Open External Panel</a>

    </div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
     <h2>Menu</h2>

    <ul data-role="listview" style="padding-right: 8px">
        <li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>

        </li>
        <li data-icon="false"><a href="#" class="sub2">Submenu 2</a>

        </li>
    </ul>
    <!-- submenu -->

    </div>

回答1:

Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:

HTML:

<ul id="myList" data-role="listview" style="padding-right: 8px">
    <li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li data-icon="false"><a href="#" class="sub2">Submenu 2</a>
    </li>
</ul>

CSS:

#myList ul {
    display: none;
}

JavaScript:

$('#myList > li').click(function() {
    var subList = $(this).children('ul');
    if (subList.is(":hidden"))
        subList.slideDown(200);
    else
        subList.slideUp(200);
});

JSFiddle demo

来源：https://stackoverflow.com/questions/23294919/how-to-make-nested-list-in-slide-panel