JQuery TreeviewとPHP

Question

私のサイトのファイル構造を表示するには、次のPHPコードがあります。これは、私のフォルダとファイルの画像を持つ非常に良い字下げ構造を与えます。

JQueryをこれに追加してフォルダを折りたたんで展開するにはどうすればよいですか？私は2つのjqueryプラグインを試しましたが、動作しませんでした。

jqueryプラグイン、記事またはコードスニペットを提案できますか？

ありがとうございました！

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

あなたが持っている構造では、ネストされた<ul>ツリーがありますが、これは比較的簡単です。

あなたのフォルダにはすべてアンカー付きの<li>要素がありますが、それ自体の中でクリック可能な入力イメージがあるのはなぜか分かりません。これらのアンカー、または "フォルダ"と呼ばれる入力にクラスを配置します。次に、すべてのULがルートフォルダとは別に隠れるようにするだけで、ユーザーが関連付けられたフォルダをクリックするとjQueryを使用してネストされた<ul>リストを表示/非表示にするだけです。

「フォルダ」クラスをセットアップすることをお勧めします。次のコードを試してください。

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