HTML - Schaltflächen im Bootstrap-Fenster ein-/ausblenden minimieren/erweitern

Question

Ich benutze ein reduzierbares Bootstrap-Fenster. Hier ist die Fidle es

Ich versuche, den folgenden zu tun:

1. ich sowohl die Schaltflächen auf den Panel-Header verschieben will (am äußersten rechten Ende) also genau entgegengesetzt zu dem Text "Panel"

2. Aber ich möchte nur die Schaltflächen sichtbar sein, wenn das Panel erweitert wird. Und wenn das Panel ausgeblendet wird, sollten die Tasten auch ausgeblendet werden.

Wie kann ich das erreichen? Was wäre der JS dafür?

Ich habe versucht, die folgenden in JS zu tun:

$(document).ready(function() {   
     $("#btnSearch").hide(); 
     $(".panel-title").click(function() {   
      $("#btnSearch").show();    
     }); 
}); 

Aber damit die Tasten verbergen nicht, wenn die Platte zu verstecken gemacht wird.

Answer 1

Versuchen Sie es. Ich habe Ihre Buttons in den Panel-Kopfbereich verschoben und sie mit position:absolute; positioniert.

Es ist sehr ähnlich wie diese bootsnipp

$(".panel-success").on('show.bs.collapse', function() { 
 
    $('.buttonCon').addClass('vis'); 
 
}).on('hide.bs.collapse', function() { 
 
    $('.buttonCon').removeClass('vis'); 
 
})

.panel{ 
 
    position:relative; 
 
} 
 
.buttonCon{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:10px; 
 
    display:none; 
 
} 
 
.buttonCon.vis{ 
 
    display:block; 
 
}

<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.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="panel panel-success"> 
 
    <div class="buttonCon"> 
 
     <button type="button" class="btn btn-primary" onclick="ReloadData()"> 
 
      Button1 
 
      <span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span> 
 
      </button> 
 
      <button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2"> 
 
      Buttonn2 
 
      <span class="glyphicon glyphicon-remove"></span> 
 
      </button> 
 
     </div> 
 
    <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;"> 
 
     <div class="panel-title"> 
 
     <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel 
 
     </div> 
 
    </div> 
 
    <div class="panel-body collapse" id="body"> 
 
     <div class="form-group row"> 
 
     <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt1" /> 
 
     </div> 
 

 
     <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt2" /> 
 
     </div> 
 

 
     <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt3" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group row" style="margin-left:auto;margin-right:auto;"> 
 
     <div class="col-md-2 col-md-offset-5"> 
 
      
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie Bootstrap-Kollaps Ereignisse um es zu erreichen nutzen können.

$('#accordion').on('shown.bs.collapse', function() { 
    $(".buttons").show(); 
}) 
$('#accordion').on('hidden.bs.collapse', function() { 
    $(".buttons").hide(); 
}) 

Überprüfen Sie diese fiddle.

Answer 3

Die folgende JsFiddle ist eine weitere Option im Vergleich zu den bereits gegebenen Antworten.

Hauptsächlich verhindert es die Verwendung von position: absolute, was zu einem Mischmasch von schlechten Dingen führen kann. Die folgende jQuery (die leicht verfügbar ist, da Sie Bootstrap verwenden) funktioniert:

$("#js-panel").on('show.bs.collapse', function() { 
    $('.js-toggle-btn').removeClass('hide'); 
}).on('hide.bs.collapse', function() { 
    $('.js-toggle-btn').addClass('hide'); 
}) 

Beachten Sie, dass es Ereignisse zu verfolgen, ob ein Panel derzeit Öffnen oder Schließen (plus zwei andere), die gefunden werden können here.

Ich würde auch vorschlagen, dass Sie sich die Zeit nehmen, einige der auf der Bootstrap-Webseite gefundenen Dokumentationen/Beispiele zu lesen, nur weil viele Ihrer css/html ziemlich grob/unnötig komplex sind.

Answer 4

Verstanden durch Arbeiten, die Antworten von @kittyCat bereitgestellt Kombination (die aktualisierte Lösung) und @BuddhistBeast.

Hier ist die Fiddle.

HTML-Code:

<div class="container"> 
    <div class="panel panel-success" id="js-panel"> 

    <div class="panelButtons"> 
     <button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;"> 
     Button2 
     <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     <button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()"> 
     Button1 
     <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </div> 

    <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;"> 
     <div class="panel-title"> 
     <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel 
     </div> 
    </div> 

    <div class="panel-body collapse" id="body"> 
     <div class="form-group row"> 
     <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt1" /> 
     </div> 

     <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt2" /> 
     </div> 

     <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt3" /> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

JS-Code:

$("#js-panel").on('show.bs.collapse', function() { 
    $('.js-toggle-btn').removeClass('hide'); 
}).on('hide.bs.collapse', function() { 
    $('.js-toggle-btn').addClass('hide'); 
})