如何在幻灯片面板中创建嵌套列表？ [英] how to make nested list in slide panel?

问题描述

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

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

我们可以嵌套

 < div data-role =pageclass =jqm-demosdata-quicklinks = true> 
< div data-role =header> 
< h1>外部面板< / h1> 
 
< / div> 
< div role =mainclass =ui-content jqm-content jqm-fullwidth> < a href =＃externalpanelclass =ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini>打开外部面板< / a> 
 
< / div> 
< / div> 
< div data-role =panelid =externalpaneldata-position =leftdata-display =revealdata-theme =a 
< h2>菜单< / h2> 
 
< ul data-role =listviewstyle =padding-right：8px> 
< li data-icon =false>< a href =＃class ='sub1'>⼦菜单1< / a> 
 
< / li> 
< li data-icon =false>< a href =＃class =sub2>⼦菜单2< / a> 
 
< / li> 
< / ul> 
<！ -  submenu  - > 
 
< / div> 
  

解决方案

假设您希望内部列表保持隐藏，直到

pre> < ul id =myListdata-role =listviewstyle =padding-right：8px>
< li data-icon =false>< a href =＃class ='sub1'> Submenu1< / a>
< ul>
< li>项目1< / li>
< li>第2项< / li>
< / ul>
< / li>
< li data-icon =false>< a href =＃class =sub2>⼦菜单2< / a>
< / li>
< / ul>


  #myList ul {
 display：none; 
} 
  

JavaScript： b

  $（'＃myList> li'）。click（function（）{
 var subList = $（this）.children '）; 
 if（subList.is（：hidden））
 subList.slideDown（200）; 
 else 
 subList.slideUp（200）; 
 }）; 
  

JSFiddle demo

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>

解决方案

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

这篇关于如何在幻灯片面板中创建嵌套列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！