[英]show/hide bootstrap accordion panel with jQuery
我有一个手风琴。 现在,我只想在特定情况下启用panel
。 当我的一个面板有效时,只有另一个面板才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>
这与它实际应如何运作不符。
应当对fallingTwo面板进行锁定,并显示一条警告消息,指出collapseOne面板无效。 如果表单有效,则应为折叠的默认行为。
显示面板后,您正在检查:
$('#clickMe').on('shown.bs.collapse', function (e) {
而是使用show
方法:
$('#clickMe').on('show.bs.collapse', function (e) {
也有其他事情在发生,但这只是一个开始。
更新:发现了另一个问题...无需强制崩溃行为。 仅在必要时防止它。
if (!$('#myform').valid()) {
return false;
}
使用默认的折叠方法显示和隐藏
显示
$("#collapseOne").collapse('show');
隐藏
$("#collapseOne").collapse('hide');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.