Question

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

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

我想移动Panel标题上的两个按钮（极端右端）即与文本“Panel”完全相反
但我只希望在展开面板时可以看到按钮。和当面板被隐藏时，按钮也应该被隐藏。

我怎样才能做到这一点。它的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>

Answer 2

您可以使用bootstrap collapse事件来实现它。

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

检查fiddle。

Answer 3

与已经给出的答案相比，以下JsFiddle是另一种选择。

主要是，它阻止了position: absolute的使用，这可能导致一些糟糕的事情发生。以下jQuery（因为你使用bootstrap后很容易获得）将起作用：

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

请注意，有些事件可以跟踪某个面板当前是打开还是关闭（另外还有两个），可以找到here。

我还建议您花时间阅读bootstrap网页上的一些文档/示例，因为很多css / html非常粗糙/不必要的复杂。

Answer 4

通过结合 @kittyCat （更新的解决方案）和 @BuddhistBeast 提供的答案来实现它。

这里是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代码：

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

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

4 个答案: