twitter-bootstrap 使用 jQuery 显示/隐藏引导手风琴面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26025764/
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
show/hide bootstrap accordion panel with jQuery
提问by user2281858
I have a bootstrap accordion. Now I want to enable a panelonly on a certain scenario. When one of my panel is valid, only then the other panel should be collapsible
我有一个自举手风琴。现在我只想panel在特定情况下启用 a 。当我的一个面板有效时，只有另一个面板有效should be collapsible
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<form id="myform" action="" method="post"> //when this form is valid, then open the collapseTwo panel
<div class="panel-body">
<input type="text" id="txtName" name="txtName" />
<br />
<input type="text" id="txtCountry" name="txtCountry" />
<br />
<input id="btn" type="submit" name="submit" value="Submit" />
<br />
</div>
</form>
</div>
</div>
<div id="clickMe" class="panel panel-default"> // this will remain closed unless the above form is not valid
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
Item #2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
//Some data
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myform").validate({
rules: {
txtName: {
required: true
},
txtCountry: {
required: true
}
}
});
$("#myform").valid();
$('#clickMe').on('shown.bs.collapse', function (e) { //i click on the panel header
if ($('#myform').valid()) { //now if the first panel(which contains form) is valid
$('#collapseTwo').collapse('show'); //then show the clicked panel
}
else {
$('#collapseTwo').collapse('hide'); //else always keep it hidden/locked
alert('form invalid');
}
})
});
</script>
This is not behaving close to how it should actually function.
这与它的实际运作方式并不接近。
The collapseTwo panel should be locked and an alert message stating that the collapseOne panel is Invalid should be displayed. And if the form is valid then it should be the default behavior of collapsing.
collapseTwo 面板应该被锁定，并且应该显示一条警告消息，指出 collapseOne 面板是无效的。如果表单有效，那么它应该是折叠的默认行为。
回答by isherwood
You're doing your check after the panel is shown:
显示面板后，您正在进行检查：
$('#clickMe').on('shown.bs.collapse', function (e) {
Instead, use the showmethod:
相反，使用以下show方法：
$('#clickMe').on('show.bs.collapse', function (e) {
There's something else going on, too, but that's a start.
还有其他事情正在发生，但这是一个开始。
Update: Found the other issue... No need to force collapse behavior. Just prevent it when necessary.
更新：发现另一个问题......无需强制折叠行为。只是在必要时阻止它。
if (!$('#myform').valid()) {
return false;
}
回答by Dadaso Zanzane
Use default collapse method to show and hide
使用默认的折叠方式来显示和隐藏
To show
以显示
$("#collapseOne").collapse('show');
To hide
隐藏
$("#collapseOne").collapse('hide');
