如何解决Catgroup仅显示一个的问题，实现旧站内部导航样式？

核心问题 #

你的代码存在HTML结构嵌套错误和变量使用错误，导致只有第一个分类组能正常显示：

1. 最外层<ul>里多了一个未配对的<li>，循环生成的新<li>被错误嵌套在这个多余标签内，后续分类组无法正常渲染
2. 子分类部分只写了</ul>闭合标签，没有对应的开启标签
3. 图片src错误使用分类名称，应该指向存储的图片路径
4. 存在多个无匹配的多余</div>闭合标签

修正后的代码 #

<div class="header__navigation">
  <div class="container">
    <div class="header__navigation-inner">
      <ul class="header__navigation-category1">
        @foreach ($all_categories as $catGroup)
          @if ($catGroup->subGroups->count())
            <li>
              <a href="{{ route('categoryGrp.browse', $catGroup->slug) }}">
                @if ($catGroup->logoImage && Storage::exists($catGroup->logoImage->path))
                  <img src="{{ Storage::url($catGroup->logoImage->path) }}" alt="{{ $catGroup->name }}">
                @endif
                <span>{{ $catGroup->name }}</span>
              </a>

              <!-- 子分类下拉容器，类名可根据旧站样式调整 -->
              <div class="dropdown-content">
                <div class="row">
                  @foreach ($catGroup->subGroups as $subGroup)
                    <div class="col">
                      <h3>{{ $subGroup->name }}</h3>
                      <ul>
                        @foreach ($subGroup->categories as $cat)
                          <li><a href="{{ route('category.browse', $cat->slug) }}">{{ $cat->name }}</a></li>
                        @endforeach
                      </ul>
                    </div>
                  @endforeach
                </div>
              </div>
            </li>
          @endif
        @endforeach
      </ul>
    </div>
  </div>
</div>

关键调整说明 #

• 移除最外层<ul>里多余的<li>，确保每个分类组都是独立的<li>子元素
• 为子分类补充完整的<ul>标签结构，包裹每个子组下的分类项
• 修正图片src为Storage::url($catGroup->logoImage->path)，并添加alt属性优化页面可用性
• 清理多余的无匹配闭合标签，保证HTML结构嵌套正确
• 添加dropdown-content类（可替换为旧站对应样式类名），方便匹配旧站导航的下拉样式

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