按下普通 Bootstrap 按钮时如何使面板折叠?这是我的代码:
<div class="panel panel-primary" style="border-color: #464646;">
<div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
<div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Object Buttons-->
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
</div>
</div>
</div>
当我点击panel-heading
时,panel-body
将会折叠,但我希望在点击其中一个“对象”时让panel-body折叠起来纽扣。
最佳答案
您可以将与 href 相同的 data-target="#collapse1"
应用于按钮。
引用
<a data-toggle="collapse" href="#collapse1">Select Object</a>
按钮
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">
此外,您的按钮未关闭。缺少 >
来关闭它。
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"
示例:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Select Object</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Select Object</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse2">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
关于javascript - 单击按钮时折叠面板 - bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38467861/