Bootstrap Angular.js 手風琴不會自動折疊

Question

我正在嘗試使用 ng-repeat 生成手風琴，如以下示例所示：

    <div class="panel-group" id="accordion">
        <div ng-repeat="One_Item in Items_List track by One_Item.Item_ID">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion_{{One_Item.Item_ID}}" href="This_Page/#collapse_{{One_Item.Item_ID}}">
                        {{One_Item.Item_ID}}</a>
                    </h3>
                </div>
                <div class="panel-collapse collapse in" id="collapse_{{One_Item.Item_ID}}">
                    <div class="panel-body">
                        <div class="form-group" style="margin:0px 0px 5px -15px">
                            <label class="control-label col-sm-3">For Item-ID {{One_Item.Item_ID}} the related text is {{One_Item.Text}}</label>
                           <!--- Other stuff... -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

一切正常（就顯示的數據而言），除了在手風琴中展開條目時，展開的其他條目不會折疊。

檢查了很多例子，但仍然無法弄清楚原因。

Answer 1

我不知道你為什么要創造新的手風琴

在https://angular-ui.github.io/bootstrap/components有一個很好的

默認設置 uibAccordionConfig

closeOthers （默認值：true）- 控制展開一個項目是否會導致其他項目關閉。

---

希望對你有幫助

Answer 2

這對我有用。 它可能需要一些調整以完全適合您的標記。 一般的想法是在單擊一個時有問題地折疊其他的。

var $triggers = $element.find('[data-toggle="collapse"]');
$triggers.on('click', function () {
    var t = $(this);
    $.each($triggers, function(i, $trigger) {
        if ($trigger !== t) {
            $($trigger).parent().find('.collapse').collapse('hide');
        }
    });
});