PHP循环标签闭合异常导致横向手风琴功能失效求助

问题根源 #

你代码里的horizontal-accordion标签闭合时机错误：前两个产品循环时，该标签一直处于未闭合状态，直到第三个产品才完成闭合，导致前两个accordion-header处于不完整的DOM结构中，手风琴JS无法正确识别并绑定点击事件，因此点击无反应。

修复后的代码 #

下面的代码用栅格系统实现每行3个卡片的布局，同时保证手风琴结构完整，功能正常：

<div class="container">
  <?php 
  $count = 0;
  $count_row = 0;
  while ($product = mysqli_fetch_assoc($all_products)) {
      // 每3个产品开启一行
      if($count_row % 3 == 0) {
          echo '<div class="row mb-3">';
      }
  ?>
      <div class="col-4"> <!-- 每个卡片占4列，3个刚好填满一行 -->
          <div class="accordion-header" data-target="#<?php echo $count ?>">
              <div class="card text-black hover-shadow">
                  <img src="images/<?php echo $product["photo_path"]?>" class="card-img-top"/>
                  <div class="card-body">
                      <div class="text-center">
                          <h5 class="card-title"><?php echo $product["name"]?></h5>
                      </div>
                  </div>
              </div>
          </div>
      </div>

  <?php
      $count_row++;
      // 每3个产品闭合当前行
      if($count_row % 3 == 0) {
          echo '</div>';
      }
      // 输出对应手风琴内容，占一整行
      ?>
      <div id="<?php echo $count ?>" class="accordion-body collapse row mb-3">
          <div class="col-12">
              //////////// 手风琴内容部分 //////////
          </div>
      </div>
  <?php
      $count++;
  }
  // 处理最后一行不足3个产品的情况，手动闭合行标签
  if($count_row % 3 != 0) {
      echo '</div>';
  }
  ?>
</div>

关键调整点 #

1. 布局结构优化：用row+col-4实现每行3个卡片的响应式布局，彻底避免原代码中标签未及时闭合的DOM结构问题。
2. 手风琴关联保证：每个accordion-header的data-target与对应accordion-body的id严格一一对应，确保JS能正确匹配触发元素和内容区域。
3. 完善DOM闭合：补充处理循环结束后可能未闭合的row标签，保证整个页面的DOM结构完整。

如果你的手风琴功能必须依赖horizontal-accordion类，只需将每个accordion-header单独包裹在该类容器中即可，调整后的代码片段如下：

<div class="col-4">
    <div class="horizontal-accordion">
        <div class="accordion-header" data-target="#<?php echo $count ?>">
            <!-- 卡片内容 -->
        </div>
    </div>
</div>

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