JQuery Treeview и PHP

Question

У меня есть следующий код PHP для отображения файловой структуры моего сайта. Это дает мне очень красивую структуру с отступами с изображениями папок и файлов.

Как я могу добавить к этому JQuery, чтобы я мог свернуть и развернуть папки? Я попробовал пару плагинов 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;
});