Bootstrap Angular.js 手风琴不会自动折叠

Question

I'm trying to generate an accordion with ng-repeat much as shown in the following sample:

    <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>

All works OK (in terms of the data being shown), except that when expanding on entry in the accordion, other entry(ies) that were expanded do not collapse.

Checked a lot of examples but still cannot figure out why.

Answer 1

I don't know why do you create new one accordion

there is good one at https://angular-ui.github.io/bootstrap/ components

Default settings uibAccordionConfig

closeOthers (Default: true) - Control whether expanding an item will cause the other items to close.

---

Hope it help you

Answer 2

This worked for me. It may need some tweaking to suit your markup exactly. The general idea is to problematically collapse the others when one is clicked.

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');
        }
    });
});