jQuery UI accordéon comme la navigation

Question

Je travaille sur une navigation de page en utilisant l'élément d'interface utilisateur d'accordéon de jQuery. La structure HTML est la suivante:

<ul id="#accordion"> 
    <li><a href="tables.php">Tables</a></li> 
    <li><a href="charts.php">charts</a></li> 
    <li><a href="statistics.php">Statistics</a> 
     <ul> 
      <li><a href="year1.php">Year 1</a></li> 
      <li><a href="year2.php">Year 2</a></li> 
     </ul> 
    </li> 
</ul> 

Maintenant, quand j'appelle l'accordéon comme si

$("#accordion").accordion(); 

cela fonctionne ... la plupart du temps. Je clique sur Statistiques, et le lien Année 1 et Année 2 défile magnifiquement. Mais il existe des liens qui n'ont aucun élément enfant, comme les deux premiers (Tableaux et graphiques). Et quand on clique là-bas, rien ne se passe.

C'est ici que je veux que les utilisateurs qui cliquent sur le lien (tableaux et graphiques) se rendent sur ces pages, et ceux qui cliquent sur Statistiques (liens avec ul imbriqués) pour voir les ul.

J'espère que cela a du sens.

Answer 1

Je ne pense pas que vous devriez vraiment utiliser l'accordéon pour la navigation - son but est de séparer des blocs d'informations sur une page, et non pas pour rediriger entre les sections de votre site. Si vous avez réussi à rediriger vers une autre page après avoir cliqué sur un accordéon - lorsque vous avez redirigé vers l'autre page, l'accordéon devrait être remis à zéro, etc, ce n'est pas vraiment possible.

Une autre chose est que le balisage HTML pour le plugin accordéon devrait comme ceci:

<div id="accordion"> 
    <h3><a href="#">Tables</a></h3> 
    <div>Tables content goes here</div> 
    <h3><a href="#">Charts</a></h3> 
    <div>Charts content goes here</div> 
</div> 

Ceci est directement du jQuery docs site.