單擊按鈕折疊面板-引導程序

Question

按下常規的自舉按鈕時如何使面板折疊？ 這是我的代碼：

<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將折疊，但是單擊“對象”按鈕之一時，我希望面板主體折疊。

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>