PHP实现按区域缩写分组的职位手风琴展示，解决位置显示问题

你的核心问题是没有正确遍历分组后的location层级——三维数组的结构是[地区缩写 => [地点名称 => [职位数组]]]，现有代码大概率跳过了「地点名称」这一层的遍历，导致无法在对应职位前显示location值。

修正后的代码实现 #

假设你的分组后数组结构如下：

$groupedJobs = [
    'NA' => [
        'New York' => [
            ['title' => '前端工程师', 'id' => 1],
            ['title' => '后端工程师', 'id' => 2]
        ],
        'Los Angeles' => [
            ['title' => 'UI设计师', 'id' => 3]
        ]
    ],
    'EU' => [
        'London' => [
            ['title' => '产品经理', 'id' => 4]
        ]
    ]
];

以下是能正确渲染location的手风琴HTML代码：

<div class="accordion">
    <?php foreach ($groupedJobs as $territoryAbbr => $locationGroups): ?>
        <!-- 地区折叠面板头部 -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="territory-<?= htmlspecialchars($territoryAbbr) ?>">
                <button class="accordion-button" type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapse-<?= htmlspecialchars($territoryAbbr) ?>" 
                        aria-expanded="false" 
                        aria-controls="collapse-<?= htmlspecialchars($territoryAbbr) ?>">
                    <?= htmlspecialchars($territoryAbbr) ?>
                </button>
            </h2>
            <!-- 地区面板展开内容 -->
            <div id="collapse-<?= htmlspecialchars($territoryAbbr) ?>" 
                 class="accordion-collapse collapse" 
                 aria-labelledby="territory-<?= htmlspecialchars($territoryAbbr) ?>" 
                 data-bs-parent=".accordion">
                <div class="accordion-body">
                    <?php foreach ($locationGroups as $locationName => $jobs): ?>
                        <!-- 显示当前Location标题 -->
                        <h3 class="location-heading"><?= htmlspecialchars($locationName) ?></h3>
                        <!-- 该Location下的职位列表 -->
                        <ul class="job-list">
                            <?php foreach ($jobs as $job): ?>
                                <li class="job-item">
                                    <span class="job-title"><?= htmlspecialchars($job['title']) ?></span>
                                    <!-- 可根据需求添加其他职位字段 -->
                                    <?php if (!empty($job['id'])): ?>
                                        <span class="job-id">(ID: <?= htmlspecialchars($job['id']) ?>)</span>
                                    <?php endif; ?>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

关键修正点 #

1. 新增location层级遍历：在地区循环内，增加foreach ($locationGroups as $locationName => $jobs)，专门遍历每个地区下的地点分组
2. 显式输出location名称：在每个职位列表前，用<h3>（或其他标签）输出$locationName
3. 安全转义输出：所有动态内容用htmlspecialchars()包裹，避免XSS注入风险

配套样式参考（可选） #

.accordion { max-width: 800px; margin: 2rem auto; }
.accordion-item { margin-bottom: 1rem; border-radius: 0.5rem; overflow: hidden; }
.location-heading { font-size: 1.1rem; margin: 1rem 0 0.5rem; color: #2d3748; }
.job-list { list-style: none; padding-left: 0; }
.job-item { padding: 0.6rem; border-bottom: 1px solid #e2e8f0; }
.job-title { font-weight: 600; }
.job-id { margin-left: 1rem; color: #718096; font-size: 0.9rem; }

内容的提问来源于stack exchange，提问作者Trisha