Listes d'expansion et de regroupement jQuery

Question

Le code développe et réduit une liste dans laquelle les éléments de liste peuvent comporter des sous-listes. Toutes les idées pour refactoriser ce code - en particulier la partie basculante. Est-il nécessaire d'utiliser des fermetures ici?

$(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'); 
} 

EDIT:

Le script fonctionne sur l'extrait de code HTML suivant (source: jQuery en action). En fait, j'essayais d'étendre le script donné dans le livre.

 <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

Votre code ne fonctionne pas pour moi dans Safari. Lorsque je clique sur une sous-liste, la liste du haut est basculée.

Que diriez-vous:

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