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

我用的是一个可折叠的引导面板。 这是它的理由

我正在努力做到以下几点：

我想移动面板标题上的两个按钮（在极端位置） 右端）即与文本“面板”正好相反

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

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

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

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

---

但是，当面板被设置为隐藏时，按钮将不会隐藏。

试试这个。我将您的按钮移动到面板标题本身，并使用

position:absolute

与此非常相似


$（.panel success”）.on（'show.bs.collapse'，function（）{
$（'.buttonCon'）.addClass（'vis'）；
}).on（'hide.bs.collapse'，function（）{
$（'.buttonCon'）.removeClass（'vis'）；
})
.panel{
位置：相对位置；
}
.钮扣{
位置：绝对位置；
顶部：5px；
右：10px；
显示：无；
}
.钮扣{
显示：块；
}

按钮1
按钮2
面板
标签1
标签2
标签3
您可以使用引导折叠事件来实现它

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

看看这个
 与前面给出的答案相比，以下是另一个选项

主要是，它防止使用
position:absolute
，这会导致糟糕的事情发生。以下jQuery（由于您使用的是引导程序，因此随时可用）将起作用：

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

请注意，可以找到跟踪面板当前是打开还是关闭（加上其他两个）的事件

我还建议您花点时间阅读bootstrap网页上的一些文档/示例，只是因为您的许多css/html非常粗糙/不必要地复杂。
将@kittyCat（更新的解决方案）和@BuddhistBeast提供的答案结合在一起，使其工作起来

这是我的建议

HTML代码：

<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>

在与“面板”相同的水平位置添加完整的代码两个按钮？你们中的大多数人几乎都给出了正确的解决方案，以满足我的要求。但是有一个问题：点击按钮会导致面板隐藏。事实不应如此。有什么方法可以防止面板隐藏？如果双击面板，则面板折叠时按钮可能会出现，显示面板时按钮可能会消失。这是一种竞赛条件，从长远来看，这个答案可能会导致更多的问题。感谢佛教徒的重要反馈。我更新了我的答案，效果很好。但是有一个问题：单击这些按钮会导致面板隐藏。事实不应如此。有没有办法防止面板隐藏？好的。我更新了答案。你现在可以查一下。如果它解决了问题。你能接受我的答案吗？我想接受你的两个答案，但我只能选择其中一个。因此，我接受了@kittyCat提供的更新解决方案，因为它解决了单击按钮时面板被隐藏的问题
$("#js-panel").on('show.bs.collapse', function() {
  $('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
  $('.js-toggle-btn').addClass('hide');
})