2010-08-27 6 views
1

Je veux que tous mes liens php générés dynamiquement soient affichés comme dans l'exemple 1 ci-dessous et quand je clique sur un lien qui amène à une autre page tous ses sous-liens sont affichés comme dans l'exemple 2 et quand je cliquez sur l'un de ces liens tous ses liens sous sont affichés comme dans le reste des exemples. J'utilise PHP, MySQL et Jquery pour mon site web si cela peut aider.Dynamic Vertical menu question

Exemple 1

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 

Exemple 2

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
     <ul> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
     </ul> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 

Exemple 3

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
     <ul> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
      <ul> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a> 
      </ul> 
     </li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     </ul> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 

Exemple 4

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
     <ul> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
      <ul> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a> 
       <ul> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       </ul> 
      </li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      </ul> 
     </li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     </ul> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 
+0

celui-ci devrait être sur le côté serveur, ou y a-t-il quelque chose que j'ai raté? – Reigel

+0

Comment est-ce un -1? – pirate

+0

Comment pourrais-je obtenir les liens à afficher comme dans les exemples que je sais déjà comment générer tout le lien. – pirate

Répondre

0

Je veux toute ma dynamique a généré des liens php à afficher comme dans exemple 1 ci-dessous et lorsque je clique sur un lien qui me prend à une autre page tous ses liens sont affichés sous comme dans l'exemple 2 et lorsque je clique sur un de ces liens tous ses liens sous sont affichés comme dans le reste des exemples.

Le gras partie n'est pas si claire.

all my dynamic generated php links 

comment est-elle dynamique générée? via ajax? Approfondissez vos explications, s'il vous plaît.

takes me to another page all its sub links are displayed 

Si cliquant sur un lien vous amène à une autre page, l'affichage alors sublink doit se faire sur côté serveur. Oui, vous pouvez le faire côté client via jQuery mais je pense que ce ne serait pas pratique.

Résumé.

Utilisez votre php pour afficher vos sous-réseaux.

HTML

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
     <ul> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
      <ul class="active"> <!-- active UL --> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a> 
       <ul> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       </ul> 
      </li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      </ul> 
     </li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     </ul> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 

CSS

ul.active ul { 
    display: none; 
} 

avec ce qui précède, utiliser vos compétences en php pour ajouter/supprimer classe active à un ul. En faisant ainsi, et avec la définition de votre CSS, aucun ul à l'intérieur actif ul n'est visible. Dans ci-dessus, Fourth Nested List ne sera pas affiché sur la page.


mise à jour

ul ul { 
    display: none; 
} 
ul.active { 
    display: block; /* or display:inline; */ 
} 

exemple

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
     <ul> <!-- this will be hidden and all it's sub ul --> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
      <ul> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a> 
       <ul> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       </ul> 
      </li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      </ul> 
     </li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     </ul> 
     <ul class="active"> <!-- active UL, this will be displayed on the browser --> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
      <ul class="active"> <!-- this will be shown if it's closest parent ul is active also --> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a> 
       <ul> <!-- this will be hidden and all it's sub ul --> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       <li><a href="link.php">Fourth Nested List</a></li> 
       </ul> 
      </li> 
      <li><a href="link.php">Third Nested List</a></li> 
      <li><a href="link.php">Third Nested List</a></li> 
      </ul> 
     </li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     </ul> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 
+0

@Reigel tous mes liens sont générés via php et tous les liens sont affichés même tous les liens imbriqués Je veux que tous mes liens parent soient affichés mais il n'y a pas d'enfants.Oui en cliquant sur un lien vous amène à une autre page et je voudrais vraiment savoir comment afficher les sous-liens en utilisant PHP – pirate

+0

s'il vous plaît voir edit – Reigel

+0

@R eigel Et s'il y a une liste imbriquée dans d'autres catégories parentes dans la première liste imbriquée comment vais-je les cacher? – pirate

0

La solution la plus simple, je voudrais essayer est:

<ul> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a> 
    <?php if($page = "Some nested page"): ?> 
     <ul> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a></li> 
     <li><a href="link.php">Second Nested List</a> 
     </ul> 
    <?php endif; ?> 
    </li> 
    <li><a href="link.php">First Nested List</a></li> 
    <li><a href="link.php">First Nested List</a></li> 
</ul> 
0

La façon dont je le ferais est d'ajouter toujours toutes les sous-menu (et sous-sous, etc.) à votre html et définir une classe active dans le menu principal, le sous-menu, le sous-sous-menu, etc. actifs en cours

J'utiliserais alors css pour cacher le sous-menu qui ne tombe pas sous une classe active. De cette façon, vous pouvez facilement faire apparaître le pop-up de votre menu à l'avenir lorsque quelqu'un fait un clic sur un parent ou clique dessus. Si jamais vous voulez ça ...

+0

où devrais-je mettre ma classe active et comment mon css ressemblerait à ma classe active et de cacher le reste des menus et l'exemple m'aiderait beaucoup. – pirate