php - Bootstrap : Accordion within accordion, 显示动态内容

Question

我在使用自举 Accordion 时遇到问题。内容都是动态生成的，我希望 Accordion 嵌套在顶级父级 Accordion 中——这是标记:

...
foreach($xml->Continent as $continent) {
   echo "<div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$continent['Name']."</a><span>".$continent['Status']."</span></div>";
    foreach($continent->Country as $country) {
       echo "<div class='accordion-body collapse in'><div class='accordion-inner'><div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$country['Name']."</a><span>".$country['Status']."</span></div>";
       foreach($country->City as $city) {
         echo "<div class='accordion-body collapse in'><div class='accordion-inner'>".$city['Name']."<span>".$city['Status']."</span></div></div>";
       }
       echo "</div></div></div>";
    }
    echo "</div>";
}
echo "</div>";
...

基本上.. 大陆应该在默认状态下全部折叠。但是一旦你点击并展开一个大陆，里面就会列出国家。这些国家也应该扩展到显示城市，并停在那里。

我之前尝试过一种不同的方法，但它是非常脆弱的代码并且在很大程度上取决于标记，如果我的内容是动态生成的并且内容可以从 1 到许多。我真的只需要折叠功能就可以工作，如果这意味着创建一个分配特定 ID 的脚本，那么它也可以工作——我只是想知道最好的方法是什么。

Answer 1

Ok...问题如下:

• 缺少 data-parent 属性 - 例如data-parent="#accordion2"
• 缺少 href 属性 - 例如href="#collapseOne"
• 缺少 id属性 - 例如id="collapseOne"

它可能不是 100% 完美，但 [请参阅我的示例] 并查看 Twitter Bootstrap's "Collapse" documentation

• 补充说明:确保“in”类仅包含在城市中(例如 class='accordion-body collapse in')。这使得这些节点始终处于扩展状态。排除您最初希望折叠的节点(大陆和国家/地区)的“in”类。