javascript - HTML - 在 Bootstrap 面板上显示/隐藏按钮折叠/展开

Question

我正在使用 Bootstrap 可折叠面板。这是 Fidle为之

我正在尝试执行以下操作:

1. 我想移动面板标题栏上的两个按钮(在极端情况下右端)即与文本“Panel”正好相反

2. 但我只希望按钮在面板展开时可见。和当面板被隐藏时，按钮也应该被隐藏。

我怎样才能做到这一点。它的 JS 是什么？

我尝试在 JS 中执行以下操作:

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

但是当面板隐藏时，按钮不会隐藏。

Answer 1

试试这个。我将您的按钮移动到面板标题本身，并使用 position:absolute; 定位它们。

和这个很相似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>