javascript - 如何使嵌套列表隐藏类似于 jquery mobile。包括样品

Question

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

我将有一个包含 1,000 多个订单项的列表。我会将其分类到父/子列表中。

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

我在 jquery mobile 之外找不到任何代码来执行此操作。

Answer 1

因此，您希望它用新列表替换列表，或者嵌套在旧列表中显示，我会为这两种情况构建不同的列表。

如果你想让它替换旧的，我会用这样的东西（如果它真的很大，使用 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.