Question

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

我也在使用bootstrap进行折叠功能。

我创建了与Stackoverflow类似的问题答案页面。

当页面加载时，它会显示所有问题，当我点击任何特定问题时，它会扩展该问题并使用答案，但答案会再次出现并且有一个锚标记可以扩展所有答案。

我的问题是，当我点击答案的锚标签时，答案会显示几秒钟，然后再次自动折叠。

以下是我的代码：

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

为什么bootstrap崩溃会自动折叠（缩小）元素？

1 个答案: