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.

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

1 个答案: