如何使嵌套列表隐藏类似于jquery移动.示例包括在内

How can I make nested lists hidden similar to jquery mobile. Sample included

本文关键字：包括 移动 jquery 嵌套 何使 列表 隐藏 类似于      更新时间：2023-09-26

我喜欢这个大列表的功能http://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html

我将有一个超过1000行项目的列表。我将把它分类到父母/孩子列表。

例如，显示的初始列表是美国各州的列表。一旦他们点击一个州，比如加州，他们应该只看到加州的子列表项。

我找不到任何代码来做到这一点以外的jquery移动

所以你想用新的列表替换它，或者在旧的列表中嵌套显示，对于这两种情况，我将构建不同的列表。

如果你想它取代旧的我去这样的东西(使用ajax加载子列表，如果它真的很大)。http://jsfiddle.net/Cmzwe/

HTML 

<ul id="main">
  <li id="wa">Washington</li>
  <li id="or">Oregon</li>
  <li id="ca">California</li>
</ul>
<ul class="hidden" id="wa-list">
  <li>Everett</li>
  <li>Seattle</li>
  <li>Olympia</li>
</ul>
<ul class="hidden" id="or-list">
  <li>Portland</li>
  <li>Salem</li>
  <li>Beverton</li>
</ul>
<ul class="hidden" id="ca-list">
  <li>Reding</li>
  <li>Modesto</li>
  <li>Stockton</li>
</ul>
CSS 

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});
Javascript 

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});

如果你想让它嵌套，那么我会这样做。http://jsfiddle.net/pKAQ8/

HTML 

<ul id="main">
  <li id="wa">Washington</li>
  <li id="or">Oregon</li>
  <li id="ca">California</li>
</ul>
<ul class="hidden" id="wa-list">
  <li>Everett</li>
  <li>Seattle</li>
  <li>Olympia</li>
</ul>
<ul class="hidden" id="or-list">
  <li>Portland</li>
  <li>Salem</li>
  <li>Beverton</li>
</ul>
<ul class="hidden" id="ca-list">
  <li>Reding</li>
  <li>Modesto</li>
  <li>Stockton</li>
</ul>
CSS 

ul.hidden{
  display:none;
}
ul.li{
  cursor:pointer;
}
Javascript 

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});

这两个都是非常基本的例子，如果你愿意，我可以扩展任何一个，只要告诉我你想要它如何工作。

Obligatory Formatted Code, JSFiddle is easier for something like this.
相关文章：