如何在滑动面板中制作嵌套列表？答案

【问题标题】：how to make nested list in slide panel?如何在滑动面板中制作嵌套列表？
【发布时间】：2014-04-25 13:42:52
【问题描述】：

您能告诉我如何在 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>

【问题讨论】：

您希望在单击其中一个菜单项时显示嵌套元素？
其实我需要当用户点击按钮（'打开外部面板'）。它显示嵌套列表如图所示
我的意思是当用户点击左侧面板中的按钮时我需要静态嵌套列表
我需要嵌套列表而不是“子菜单 1 和子菜单 2”按钮
要获得任意深度的可扩展、分层列表，您可以使用树视图/树网格 (jqueryscript.net/tags.php?/tree+view)，但在小型移动设备上的可用性可能不是那么好。也许带有面包屑的向下钻取菜单会更好，例如filamentgroup.com/examples/menus/ipod.php

标签： javascript jquery css html jquery-mobile

【解决方案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

【讨论】：