PHP Bootstrap Accordion - 如何显示动态数据？

Question

因此，我试图让 bootstrap 手风琴动态显示以获胜次数最多的前 5 名球队，我还将它用于其他排名。

问题是每当我单击选项卡 2、3 或 4 时，它只会在手风琴中打开选项卡 1。我知道问题出在“href='#collapse41'”在每个循环中都是相同的。我认为这将需要每个手风琴 div 选项卡的唯一 ID，但我不知道如何正确实现它。我可能 100% 错了，如果是，请纠正我！

我对此进行了大约 15 次搜索，但只找到了一个答案，这不是很详细或有用。任何帮助或学习如何做到这一点的指示将不胜感激。

（我将其重命名为#collapse41 是因为我在同一页面上有多个手风琴。）

---

<div class="accordion" id="accordion2">
<?php
include 'db.php'; //connect to database
$result = mysql_query("SELECT * FROM teams ORDER BY wins DESC LIMIT 5");
    $rank = 1;

    if (mysql_num_rows($result)) {
        while ($row = mysql_fetch_assoc($result)) {

echo "<div class='accordion-group'>";
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion4' href='#collapse41'>";

    echo "<td>{$row['name']} <br /> </td>";

echo "</a>";
echo "</div>";
echo "<div id='collapse41' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";

    echo "<td>Rank: {$rank} <br /> </td>";
    echo "<td>Wins: {$row['wins']} <br /> </td>";
    echo "<td>Losses: {$row['losses']} <br /> </td>";

echo "</div>";
echo "</div>";
echo "</div>";

            $rank++;        
        }
    }
    ?>
</div>

Answer 1

你必须打破循环......并循环一次以获取标题，并循环两次以获取正文...

所以你需要先回显组 div....

 echo "<div class='accordion-group'>";

然后开始循环输出标题... 然后运行另一个循环来输出 div....

if (mysql_num_rows($result)) {
  //LOOP 1  
  while ($row = mysql_fetch_assoc($result)) {

  //Build heading pieces
  echo "<div class='accordion-heading'>";
  echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion-".$row['id']." href='#accordian-".$row['id']."'>";

 echo "<td>{$row['name']} <br /> </td>";

 echo "</a>";
 echo "</div>";}

 //LOOP 2
 //Build inner pieces
 while ($row = mysql_fetch_assoc($result)) {

 echo "<div id='accordian-".$row['id']."' class='accordion-body collapse'>";
 echo "<div class='accordion-inner'>";

 echo "<td>Rank: {$rank} <br /> </td>";
 echo "<td>Wins: {$row['wins']} <br /> </td>";
 echo "<td>Losses: {$row['losses']} <br /> </td>";

 echo "</div>";
 echo "</div>";  }


echo "</div>";

        $rank++;        
    }
}

我实际上并不太确定您的手风琴的结构，所以这可能是也可能不是正确的信息，但是每当我做 twiiter-bootstrap 手风琴时，我就是这样做的。如果您可以发布您预期的 HTML 输出（手风琴模板），那将对我有很大帮助，我可以修改我的答案以适合您的实际需要