Question

我遇到麻烦让我的自举手风琴工作。内容全部是动态生成的，我希望手风琴可以嵌套在顶级父手风琴中 - 这是标记：

...
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到1变化，我认为这不是一个好的途径。许多。我真的只需要折叠功能才能工作，如果这意味着创建一个分配特定ID的脚本，那么这也有效 - 我只是好奇最好的方法是什么。

Answer 1

好的......问题如下：

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

可能不是100％完美，但see my example并查看Twitter Bootstrap's "Collapse" documentation

附加说明：确保班级'in'仅包含在城市中（例如class='accordion-body collapse in'）。这使得这些节点始终展开。删除最初要折叠的节点（大陆和国家/地区）的“in”类。

Bootstrap：手风琴中的手风琴，显示动态内容

1 个答案: