Javascript 如何使嵌套列表像jquery mobile一样隐藏。样本包括在内

我喜欢大列表的这个功能

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

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

---

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

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

如果你想用它来代替旧的，我会用这样的东西（如果它真的很大，使用ajax来加载子列表）

HTML

Javascript

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

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

如果你想要嵌套的话，我会这样做

HTML

Javascript

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

$('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.

---

最好在你的答案中加入代码，这样搜索引擎就能找到它，有类似问题的人就能看到所有答案。另外，我的浏览器在你粘贴的第二个文件中没有显示任何源代码。这很奇怪，JSFIDLE从来没有把它搞砸过。我会更新我的回复，但会变得一团糟。我投票给你，接受了答案。这不是我想要的100%，但我可以重新格式化我的列表以匹配您的示例。这是最小的代码，看起来很棒。谢谢

$('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.