ボタンをクリックするとパネルが折りたたまれます。 - ブートストラップ

Question

通常のブートストラップボタンを押したときに、パネルの折り畳みをどうやって作りますか？私はpanel-headingをクリックしたときに

<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-bodyが崩壊しますが、私は「オブジェクト」のいずれかのボタンをクリックすると、パネル体の崩壊がしたい：ここに私のコードです。

Answer 1

同じdata-target="#collapse1"をhrefと同じボタンに適用できます。

のhref

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