0

(Twitter) ブートストラップを含めたページがあります。このページには完全に機能するアコーディオンがあり、そのアコーディオン内に折りたたみ可能な div があります。以下のコードを参照してください。

<div class="accordion" id="checkListAccordion">
<div ng-repeat="item in items" class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#checkListAccordion" href="#collapse{{item.$$hashKey}}">{{item.name}}</a>     
    </div>
    <div id="collapse{{item.$$hashKey}}" class="accordion-body collapse">
        <div class="accordion-inner">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="badges span12">
                        <span class="badge badge-info" data-toggle="collapse" data-target=".info{{item.$$hashKey}}"><i class="icon-info-sign icon-white"></i></span>
                        <div class="info{{item.$$hashKey}} collapse in">
                            {{item.info}}
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                       some text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ここで、情報バッジをクリックすると、対応するクラスの div が折りたたまれて開きます。しかし、もう一度クリックしても元に戻りません。navbar と navbar-inner にラップするときだけ、折りたたまれます....しかし、もちろん、私はそれを望んでいません。

これについて何か助けはありますか？

4

1 に答える 1

1

コードにコントローラーを追加すると、すべてが期待どおりに機能するようです:

angular.module('plunker',[]);
function AccordionDemoCtrl($scope) {
  $scope.oneAtATime = true;

  $scope.items = [
    {
      name: "Dynamic Group Header - 1",
      info: "Dynamic Group Body - 1"
    },
    {
      name: "Dynamic Group Header - 2",
      info: "Dynamic Group Body - 2"
    }
  ];


}

参照: http://plnkr.co/nX4kvMThA0bYwcbXZS7t使用しているバージョンに問題がある可能性はありますか? jQuery 1.9.1、Twitter Bootstrap 2.3.1、angularJS 1.0.7 を使用しました (参照: Angular JS Bootstrap Accordian Example )。

ところで、UI Bootstrap ( http://angular-ui.github.io/bootstrap/ ) の使用を検討していますか? (アコーディオン)

于 2013-06-01T22:40:19.823 に答える