求实现图片中效果的PHP/jQuery文件列表脚本（支持foreach遍历）

Hey there! I totally get how frustrating it is when you've tried multiple approaches and nothing sticks—let's fix this file list problem for you. Your path format (The walking dead / The walking dead S01 / The.Walking.Dead.S01E04.480p.mkv) is perfect for building a nested, expandable list, and here's a straightforward implementation using PHP to structure the data and jQuery for interactive behavior.

Step 1: PHP to Build Nested HTML Structure #

First, we'll take your foreach-loop file paths and convert them into a nested unordered list. We'll split each path by the / separator, then build a tree structure so folders (parent levels) contain their subfolders/files.

<?php
// Replace this array with your actual foreach data source
$filePaths = [
    "The walking dead / The walking dead S01 / The.Walking.Dead.S01E04.480p.mkv",
    "The walking dead / The walking dead S01 / The.Walking.Dead.S01E05.480p.mkv",
    "The walking dead / The walking dead S02 / The.Walking.Dead.S02E01.480p.mkv",
    "Breaking Bad / Breaking Bad S01 / Breaking.Bad.S01E01.720p.mp4"
];

// Function to build a hierarchical tree from paths
function buildFileTree($paths) {
    $tree = [];
    foreach ($paths as $path) {
        // Split path into parts and trim whitespace
        $parts = array_map('trim', explode('/', $path));
        $current = &$tree;
        foreach ($parts as $part) {
            if (!isset($current[$part])) {
                $current[$part] = [];
            }
            $current = &$current[$part];
        }
    }

    // Recursively convert tree to HTML
    function renderTree($tree) {
        $html = '<ul class="file-tree">';
        foreach ($tree as $node => $children) {
            $hasChildren = !empty($children);
            $html .= '<li class="tree-node">';
            // Add toggle button for folders
            $html .= '<span class="node-toggle">' . ($hasChildren ? '+' : '') . '</span>';
            $html .= '<span class="node-name">' . htmlspecialchars($node) . '</span>';
            // Render child nodes if exist
            if ($hasChildren) {
                $html .= renderTree($children);
            }
            $html .= '</li>';
        }
        $html .= '</ul>';
        return $html;
    }

    return renderTree($tree);
}

// Output the final file tree HTML
echo buildFileTree($filePaths);
?>

Step 2: jQuery for Interactive Expand/Collapse #

Add some jQuery to make the list expandable when clicking on folder nodes, plus basic CSS to style the interface for clarity.

First, add this CSS to your stylesheet:

.file-tree {
    list-style: none;
    padding-left: 20px;
    font-family: Arial, sans-serif;
}
.tree-node {
    margin: 4px 0;
}
.node-toggle {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    text-align: center;
    color: #555;
}
.node-name {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.node-name:hover {
    background-color: #f0f0f0;
}
/* Hide child lists by default */
.file-tree ul {
    display: none;
}
/* Show child lists when parent is expanded */
.file-tree .expanded > ul {
    display: block;
}

Then add this jQuery script at the end of your page:

$(document).ready(function() {
    // Toggle expand/collapse when clicking the toggle button
    $('.node-toggle').click(function() {
        const parentLi = $(this).closest('.tree-node');
        parentLi.toggleClass('expanded');
        // Update toggle icon
        $(this).text(parentLi.hasClass('expanded') ? '-' : '+');
    });

    // Optional: Allow clicking the node name to toggle too
    $('.node-name').click(function() {
        $(this).siblings('.node-toggle').click();
    });
});

How It Works #

• PHP Part: We split each path into its individual components, build a hierarchical array (tree), then recursively convert that tree into nested <ul>/<li> elements. Folder nodes get a toggle button (+/-) to indicate expandable content.
• jQuery Part: We bind click events to toggle buttons (and node names, optionally) to show/hide child lists and update the toggle icon. The CSS ensures collapsed lists stay hidden by default and expand when triggered.

This setup will give you a clean, interactive file list that matches the nested structure of your paths. Feel free to tweak the CSS to match your exact visual preferences!

内容的提问来源于stack exchange，提问作者Patrik Fejfár