javascript - 为什么 Bootstrap 崩溃会自动折叠(收缩)元素？

Question

您好，我正在使用带有 HTML 的 AngularJs 来获得动态内容。

我还使用 bootstrap 来实现折叠功能。

我创建了类似于 Stackoverflow 的问答页面。

页面加载时，它会显示所有问题，当我单击任何特定问题时，它会展开该问题和答案，但答案会再次折叠，并且有一个 anchor 标记可以展开所有答案。

我的问题是，当我单击答案的 anchor 标记时，答案会显示几秒钟，然后又会自动折叠。

下面是我的代码:

<div style="" class="row ans-txt left-margin-img">
    {{ answer.a_list.as.length }} ANSWERS
    <a data-target=".demo" data-parent="" data-toggle="collapse">
        <img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height: 24px; width: 24px; display: inline; float: right; right: 18px; position: absolute;"></img>
    </a>
</div>
<div class="row " style="padding-top:14px;height:auto;" ng-repeat-start="(key, value) in answer.a_list.as">
    <div class="col-xs-2 col-sm-1 col-md-1 content-padding2 collapse demo">
        <div>
            <button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 1)">
     <i class="glyphicon glyphicon-chevron-up"></i>
    <img src="assets/svg/uparrow.svg" class="img-responsive" style="height:24px;width:24px;"></img>
     </button>
        </div>
        <div><button type="text" class="searchStyle bgStyle  btn-txt" disabled>{{ value.raw.netvotes }}</button></div>
        <div>
            <button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 0)">
    <i class="glyphicon glyphicon-chevron-down"></i>
    <img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height:24px;width:24px;"></img>
    </button>
        </div>
    </div>

    <div class="col-xs-11 col-sm-10 col-md-11 padding-rightPane collapse demo">
        <p class="ex2">{{ value.raw.content }}</p>
        <p class="bottom-margin14">
            <div class="askedBy-txt">
                Answered by {{ value.raw.handle ? value.raw.handle : value.raw.email }} on {{ value.raw.created * 1000 | date:'MMMM dd, yyyy'}}
            </div>
            <img src="assets/svg/tick_icon.svg" style="height:20px;width:20px;" class="img-responsive pull-right" title="Best answer"
                ng-if="value.select_text === 'Best answer'"></img>
        </p>
    </div>
</div>

Answer 1

尝试切换类.collapse.in。它切换折叠元素的 CSS 状态。

<div class="...collapse..." ng-class="{'in': !isCollapsed}">
</div>