버튼 클릭시 패널 접기 - 부트 스트랩

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

href와 동일한 버튼 data-target="#collapse1"을 적용 할 수 있습니다.

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>