Question

我只想在angular2中使用简单的折叠面板进行搜索过滤。这很简单。但我没有得到我在这里失踪的东西...... 它无法在按钮点击时显示面板主体，但是glyphicon会改变其行为。我在后面的代码中设置了布尔值，这样点击面板体内的搜索按钮，也会导致崩溃。请纠正我出错的地方...... 高级中的thanq

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <!--<a data-toggle="collapse" data-target="#collapse1">
            Collapsible panel</a>-->
            <button type="button" class="glyphicon"
                    [ngClass]="{'glyphicon-chevron-up': isCollapsedContent , 'glyphicon-chevron-down': !isCollapsedContent }"
                    style="float: right;" data-toggle="collapse" data-target="#collapse1"
                    (click)="isCollapsedContent = !isCollapsedContent"></button>
        </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
    </div>
</div>

Answer 1

你应该使用如下

<div>
      <div class="panel panel-default">
      <div class="panel-heading">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapse1">Simple collapsible</button>
      </div>
       <div class="panel-body">
         <div id="collapse1" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
     </div>
</div>

<强> LIVE DEMO

bootstrap折叠面板在angular2中给出奇怪的输出

1 个答案: