Basculer multi-niveau ul avec mootools

Question

Salutations, Je voudrais basculer un énorme ul multi-niveau avec mootools 1.1 ou javascript simple. La liste ressemble à: HTML:

<ul> 
    <li>aaa</li> 
    <li>bbb</li> 
    <li>ccc</li> 
    <li> 
     <ul> 
      <li>ddd 
       <ul> 
        <li>fff</li>  
        <li>ggg</li> 
       </ul> 
      </li> 
      <li>eee</li> 
     </ul> 
    </li> 
</ul> 

Ce que je voudrais faire est d'abord de montrer le premier niveau élargi, et les autres niveaux effondré et lorsque chacun des éléments de la liste est cliquée, d'élargir le ul ci-dessous.

Est-il possible de le faire sans (grandement) modifier le html ci-dessus? De la documentation, je vois que Fx.Slide est le plus approprié, mais il accepte l'id de l'élément en tant que paramètre, ce qui signifie que je dois assigner des id à chaque élément de la liste. Y a-t-il un moyen d'utiliser des sélecteurs de collections d'éléments commençant par le haut?

Answer 1

Je ne suis pas sûr whay je vais dire appliquer avec la très ancienne version 1.1. Cependant, au moins depuis 1.2, l'élément que vous devez passer est soit l'ID (comme vous l'avez dit), soit l'élément réel.

Si vous pouvez utiliser une autre version que 1.1, essayez la 1.3 qui facilite la sélection des éléments que vous voulez.

Ici, je crois que vous avez besoin de chaque élément <ul> qui a un <li> comme parent. MooTools 1.3 comporte ce nouveau moteur de sélecteur Slick, qui l'accomplira assez facilement: ul !> li.

Cependant, je ne suis pas sûr (je n'ai pas réussi) que les sélecteurs d'enfants directs fonctionnent correctement avec 1.1.

Voici ce que j'ai imaginé: http://jsfiddle.net/rCfwq/