JQuery Treeview et PHP

Question

J'ai le code PHP suivant pour afficher la structure de fichier de mon site. Cela me donne une très belle structure en retrait avec des images de dossier et de fichier.

Comment puis-je ajouter JQuery pour que je puisse réduire et développer les dossiers? J'ai essayé quelques plugins de jquery mais ils n'ont pas fonctionné.

Pouvez-vous suggérer un plugin jquery ou un article ou un extrait de code?

Merci!

<?php 
$path = ROOT_PATH; 
$dir_handle = @opendir($path) or die("Unable to open $path"); 
list_dir($dir_handle,$path); 

function list_dir($dir_handle,$path) 
{ 
    echo "<ul>"; 

    while (false !== ($file = readdir($dir_handle))) 
    { 
     $dir =$path.'/'.$file; 
     if(is_dir($dir) && $file != '.' && $file !='..') 
     { 
      $handle = @opendir($dir) or die("undable to open file $file"); 
       echo '<li><a href="#"><input name="" type="image" src="themes/default/images/explore/folder.png" />'.$file.'</a></li>'; 
      list_dir($handle, $dir); 
     } 
     elseif($file != '.' && $file !='..') 
     { 
      echo '<li><a href="?f='.SITE_URL.$file.'"><input name="" type="image" src="themes/default/images/explore/file.png" />'.$file.'</a></li>'; 
     } 
    } 

    echo "</ul>"; 

    closedir($dir_handle); 
} 
?> 

Answer 1

Avec la structure que vous avez, un arbre <ul> imbriqué, cela devrait être relativement facile.

Vos dossiers contiennent tous <li> éléments avec des ancres, sans trop savoir pourquoi, car vous avez des images d'entrée qui sont cliquables dans leur propre droit. Mettez une classe sur ces ancres ou l'entrée appelée "dossier" ou quelque chose. Ensuite, tout ce que vous devez faire est de masquer tous les UL pour commencer en dehors du dossier racine et utiliser jQuery pour afficher/masquer les listes imbriquées <ul> lorsqu'un utilisateur clique sur le dossier associé.

Si vous configurez cette classe "dossier", essayez le code suivant.

/* if you want to hide all but the root with code */ 
$('ul:gt(0)').hide(); 

$('.folder').click(function() { 
    $(this).parents('li:first').next('ul').slideToggle('slow'); 
    return false; 
});