javascript - jquerymobileのようにネストされたリストを非表示にするにはどうすればよいですか。サンプルが含まれています

Question

大きなリストにはこの機能が大好きですhttp://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html

1,000を超える広告申込情報のリストを作成します。親子リストに分類してもらいます。

たとえば、表示される最初のリストは、米国の州のリストです。カリフォルニアのような州をクリックすると、カリフォルニアのサブリストアイテムのみが表示されます。

jquerymobileの外部でこれを行うためのコードが見つかりません。

Answer 1

So you want it to replace the list with the new one, or show in nested in the old one, I'd build it different for either case.

If you want it to replace the old one I'd go with something like this (using ajax to load sub lists if it's really large). 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');
});

If you want it nested then I'd do it more like this. 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');
});

This are both very basic examples, I can expand on either one if you'd like, just let me know how you want it to work.

Obligatory Formatted Code, JSFiddle is easier for something like this.