Quelle est la meilleure approche pour implémenter Tree View?

Question

Je travaille Tree View construit en utilisant tag imbriqué ul li comme ci-dessous:

<ul> 
     <li>Level 1 a 
      <ul> 
       <li>Level 2 a</li> 
       <li>Level 2 b 
        <ul> 
         <li>Level 3 a</li> 
         <li>Level 3 b</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li>Level 1 b</li> 
    </ul> 

Je voulais l'élément de liste est cliquable sur la cellule lorsque naviguer dans l'arborescence comme ci-dessous:

Je sais que nous pouvons ajouter la fonction JavaScript sur élément de la liste ci-dessous:

<li onClick="redicrectPage(url)"> 

et ajouter event.cancelBubble = true pour éviter que l'événement parent ne se déclenche lorsque l'élément enfant est cliqué.

Ma question est, une meilleure solution de contournement de l'implémentation ci-dessus?

Nous vous remercions d'avance.

Answer 1

Vous pouvez créer une structure de menu imbriquée dans CSS seul, ce qui supprimerait le problème de formation de bulles. L'exemple à http://jsfiddle.net/steveukx/HfDBA/ utilise le sélecteur de descente directe pour pouvoir répéter les mêmes sélecteurs sans avoir besoin de connaître la profondeur du menu, mais si vous soutenez les navigateurs qui n'ont pas cette fonctionnalité, vous devriez changer le HTML pour ajouter des classes à nommer la profondeur dans l'arbre et spécifiez ceux dans le CSS.

HTML:

<ul class="menu"> 
    <li><a href="#">Level 1 a</a> 
     <ul> 
      <li><a href="#">Level 2 a</a></li> 
      <li><a href="#">Level 2 b</a> 
       <ul> 
        <li><a href="#">Level 3 a</a></li> 
        <li><a href="#">Level 3 b</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Level 1 b</a></li> 
</ul>​ 

CSS

* { font-family: tahoma, sans-serif; font-size: 10pt; } 
a { text-decoration: none; color: #fff; display: block; } 
ul { display: none; } 
ul.menu, li:hover > ul { display: block; } 
li > ul { position: absolute; top: 25%; left: 100%; margin-left: -1em; 
    box-shadow: -1px 1px 1px rgba(0,0,0,0.5); z-index: 1000; } 
li { position: relative; padding: 0.1em 0.5em; width: 100px; background: silver; 
    box-shadow: -1px 1px 1px rgba(0,0,0,0.5); margin: 1px 1px 0; } 
li:hover { background-color: #333; } 
li:hover > a { color: #FAFAFE; }