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'}) 
})