折り畳み可能なリストを2つの方向に作成しますか？

Question

私は初心者のプログラマーですから、この質問は少しシンプルかもしれません。私は、マウスクリックのアクションの後に左から右への単純な崩壊にリストをjQueryのに次のコードを使用しています：

1. アイテム：

   $(initlist); 
   function initlist(){ 
       $('li:not(:has(ul))').css({cursor:'default','list-style-image':'none'}); 
       $('li:has(ul)') 
       .click(collapse) 
       .click() 
       .css({cursor:'pointer','list-style-image':'url(plus.gif)'}) 
       .children().hide(); 
   }; 
   function collapse(event){ 
       if (this == event.target) { 
       $(this).children().toggle(); 
       $(this).css('list-style-image', 
          ($(this).children().is(':hidden')) ? 'url(plus.gif)' :url(minus.gif)'); 
       } 
   }; 
   </script> 
   

   HTMLは次のように見て、通常の順不同のリストです1

2. 項2
   • 項目4
     
   • 項目5
     • 項目6
       • 項目8
     • 項7
       
3. 項3
   

今、私はすべてのタグを適用するか、上から下へも折りたたみ可能なリストを作成するためのHTMLコード - を変更-without方法を見つけようとしている：各項目は、デフォルトでは非表示になった後、登場しています例えば、キーボード上で下向きの矢印がクリックされた場合、1つずつ。
たとえば、項目1-5は、項目2のダウン - ダウン - >マウスクリックで表示されます。

本当に助けていただきありがとうございます。

Answer 1

（以下行われるよう）あなたがアンカータグを使用してリスト内のテキスト要素をラップすることができた場合は、この全体のことがずっと簡単になり：

$('ul').hide() 
$('li').contents() 
     .filter(function(){return this.nodeType === 3}) 
     .wrap('<a>'); 

$('a').click(function() { 
    $(this).next('ul').toggle() 
})