jQuery展開和摺疊列表

Question

代碼展開和摺疊列表項，其中列表項可以具有子列表。任何想法來重構這段代碼 - 特別是切換部分。這裏有必要使用閉包嗎？

$(function() 
{ 
    $('li:has(ul)') 
    .click(function(event){ 
     if (this == event.target) 
     { 
      var that = this; 
      $('li:has(ul)').children().filter(':not(:hidden)').parent().each(function(x){ 
       if(this != that) 
        toggleList(this); 
      }); 
      toggleList(this); 
     } 
    }) 
    .css({cursor:'pointer', 'list-style-image':'url(plus.gif)'}) 
    .children().hide(); 

    $('li:not(:has(ul))').css({cursor: 'default', 'list-style-image':'none'}); 
}); 
function toggleList(L) 
{ 
    $(L).css('list-style-image', (!$(L).children().is(':hidden')) ? 'url(plus.gif)' : 'url(minus.gif)'); 
    $(L).children().toggle('fast'); 
} 

編輯：

該腳本適用於以下HTML片段（來源：jQuery的在行動）。其實我試圖擴展書中給出的腳本。

 <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li> 
      Item 3 
      <ul> 
      <li>Item 3.1</li> 
      <li> 
       Item 3.2 
       <ul> 
       <li>Item 3.2.1</li> 
       <li>Item 3.2.2</li> 
       <li>Item 3.2.3</li> 
       </ul> 
      </li> 
      <li>Item 3.3</li> 
      </ul> 
     </li> 
     <li> 
      Item 4 
      <ul> 
      <li>Item 4.1</li> 
      <li> 
       Item 4.2 
       <ul> 
       <li>Item 4.2.1</li> 
       <li>Item 4.2.2</li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li>Item 5</li> 
     </ul> 

Answer 1

您的代碼在Safari中不適用於我。當我點擊一個子列表時，頂部列表被切換。

如何：

$(document).ready(function() { 
    $('li:has(ul)').click(function(event) { 
    $(this).css('list-style-image', $(this).children().is(':hidden') ? 'url(minus.gif)' : 'url(plus.gif)') 
    $(this).children().toggle('fast') 
    return false 
    }) 
    .css({cursor:'pointer', 'list-style-image':'url(plus.gif)'}) 
    .children().hide() 

    $('li:not(:has(ul))').click(function(event) { return false }) 
    .css({cursor:'default', 'list-style-image':'none'}) 
})