Question

你能告诉我如何在jQuery的幻灯片面板中创建一个嵌套列表吗？我能够创建一个幻灯片，但我想在jQuery的左侧面板中创建嵌套列表。

我们可以在幻灯片中制作嵌套列表吗？

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

Answer 1

假设您希望内部列表在单击其父级之前保持隐藏状态，这样的内容可能会给您一个想法：

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

如何在幻灯片面板中创建嵌套列表？

1 个答案: