使用jQuery顯示/隱藏bootstrap手風琴面板

Question

我有一個自舉手風琴。現在我只想在某種情況下啓用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> 

Fiddle

這行爲不靠近它應該如何運作實際。

應該鎖定collapseTwo面板並顯示一條警告消息，指出collapseOne面板無效。如果表單有效，那麼它應該是摺疊的默認行爲。

Answer 1

你做你檢查出後面板：

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

相反，使用show方法：

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

還有別的事情了，但是這是一個開始。

---

更新：發現其他問題...無需強制崩潰行爲。必要時防止它。

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

Demo

Answer 2

使用默認崩潰的方法來顯示和隱藏

要顯示

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

要隱藏

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