4

ブートストラップ アコーディオンを機能させるのに問題があります。コンテンツはすべて動的に生成されます。アコーディオンを最上位の親アコーディオン内にネストしたいと思います。マークアップは次のとおりです。

...
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を割り当てるスクリプトを作成することを意味する場合、それも機能します-最善の方法が何であるかについて興味があります.

4

1 に答える 1

5

わかりました...問題は次のとおりです。

  • data-parent属性がありません -例data-parent="#accordion2"
  • href属性の欠落- 例href="#collapseOne"
  • id 属性の欠落- 例id="collapseOne"

100% 完璧ではないかもしれませんが、[私の例を見て] Twitter Bootstrap の「Collapse」ドキュメントをチェックしてください。

  • 追加メモ: クラス「in」が都市にのみ含まれていることを確認してください (例: class='accordion-body collapse in')。これにより、これらのノードが常に展開されます。最初に折りたたむノード (大陸と国) の「in」クラスを除外します。
于 2013-02-06T02:59:41.783 に答える