ein - /ausblenden bootstrap-Akkordeon-panel mit jQuery
Ich habe eine bootstrap-Akkordeon. Nun möchte ich ermöglichen eine panel
nur auf ein bestimmtes Szenario. Wenn einer meiner Systemsteuerung ist gültig, nur dann sind die anderen 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>
Dies ist kein Verhalten nahe, wie sollte es eigentlich funktionieren.
Den collapseTwo Bedienfeld gesperrt werden soll und eine Warnmeldung, die besagt, dass die collapseOne panel ist Ungültig angezeigt werden soll. Und wenn die form gültig ist, dann sollte es das Standard-Verhalten zu zerbrechen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Tun Sie Ihre überprüfen Sie nach dem panel angezeigt wird:
Verwenden Sie stattdessen die
show
Methode:Es ist etwas anderes, auch, aber das ist ein Anfang.
Update: Fand das andere Problem... Keine Notwendigkeit zu zwingen, zusammenbrechen Verhalten. Nur verhindern, wenn nötig.
Demo
Verwenden Sie die Standard-Zusammenbruch Methode zum ein-und ausblenden
Zeigen
Verstecken