JQuery Treeview und PHP

Question

Ich habe den folgenden PHP-Code, um die Dateistruktur meiner Website anzuzeigen. Dies gibt mir eine sehr schöne eingerückte Struktur mit Ordner- und Dateibildern.

Wie kann ich JQuery hinzufügen, damit ich die Ordner reduzieren und erweitern kann? Ich habe ein paar jquery plugins ausprobiert, aber sie haben nicht funktioniert.

Können Sie ein jquery-Plugin oder einen Artikel oder ein Code-Snippet vorschlagen?

Vielen Dank!

<?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

Mit der Struktur, die Sie, ein verschachtelter <ul> Baum haben, sollte dies relativ einfach sein.

Ihre Ordner haben alle <li> Elemente mit Ankern in ihnen, nicht ganz sicher, warum, wie Sie Eingabe-Bilder in ihnen haben, die anklickbar sind in ihrem eigenen Recht. Setzen Sie eine Klasse auf diese Anker oder den Eingang namens "Ordner" oder so. Dann müssen Sie nur noch die ULs ausblenden, die mit dem Stammordner beginnen, und jQuery verwenden, um die verschachtelten Listen <ul> anzuzeigen/auszublenden, wenn ein Benutzer auf den zugehörigen Ordner klickt.

Wenn Sie diese Klasse "Ordner" einrichten, versuchen Sie den folgenden Code.

/* 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; 
});