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

Question

我正在使用Bootstrap可折叠面板.这是它的Fidle

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

1. 我想移动Panel标题上的两个按钮(在最右端),即与文本"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>