使用jQuery显示/隐藏bootstrap手风琴面板

问题描述：

我有一个自举手风琴。现在我只想在某种情况下启用panel。当我的面板之一是有效的，只有那么其他面板should be collapsible使用jQuery显示/隐藏bootstrap手风琴面板

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

Fiddle

这行为不靠近它应该如何运作实际。

应该锁定collapseTwo面板并显示一条警告消息，指出collapseOne面板无效。如果表单有效，那么它应该是折叠的默认行为。

答

你做你检查出后面板：

$('#clickMe').on('shown.bs.collapse', function (e) {

相反，使用show方法：

$('#clickMe').on('show.bs.collapse', function (e) {

还有别的事情了，但是这是一个开始。

更新：发现其他问题...无需强制崩溃行为。必要时防止它。

if (!$('#myform').valid()) { 
    return false; 
}

Demo

答

使用默认崩溃的方法来显示和隐藏

要显示

$("#collapseOne").collapse('show');

要隐藏

$("#collapseOne").collapse('hide');

使用jQuery显示/隐藏bootstrap手风琴面板

相关推荐