twitter-bootstrap HTML - 在 Bootstrap 面板上显示/隐藏按钮折叠/展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41339315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand
提问by Mr.SK
I'm using a Bootstrap collapsible panel. Here's the Fidlefor it
我正在使用 Bootstrap 可折叠面板。这是它的Fiddle
I'm trying to do the following :
我正在尝试执行以下操作：
I want to move both the buttons on the Panel header(at the extreme right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And when the panel is hidden the buttons should be hidden too.
我想移动面板标题上的两个按钮（在最右端），即与文本“面板”完全相反
但我只希望在面板展开时按钮可见。当面板隐藏时，按钮也应该隐藏。
How can I achieve this. What would be the JS for it?
我怎样才能做到这一点。它的 JS 是什么？
I tried to do the following in JS:
我尝试在 JS 中执行以下操作：
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.
但是这样当面板隐藏时按钮不会隐藏。
回答by ab29007
Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
试试这个。我将您的按钮移至面板标题本身并使用position:absolute;.
It is very similar to this bootsnipp
它与这个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> 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>回答by ilmk
回答by BuddhistBeast
The following JsFiddleis another option compared to the answers already given.
与已经给出的答案相比，以下JsFiddle是另一种选择。
Mainly, it prevents the use of position: absolutewhich can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
主要是，它可以防止使用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');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
请注意，有一些事件可以跟踪面板当前是打开还是关闭（以及其他两个），可在此处找到。
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.
我还建议您花时间阅读引导程序网页上的一些文档/示例，只是因为您的很多 css/html 都非常粗糙/不必要地复杂。
回答by Mr.SK
Got it working by combining the answers provided by @kittyCat(the updated solution) and @BuddhistBeast.
通过结合@kittyCat（更新的解决方案）和@BuddhistBeast提供的答案，让它工作起来。
Here's the Fiddle.
这是小提琴。
HTML code :
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> 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代码：
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
