Bootstrap手風琴面板自動對焦表單驗證

Question

我仍在使用Bootstrap3手風琴組件開發一塊界面。 我已經在不同的面板中細分了一些字段，並且在字段中添加了soem要求。 現在，如果用戶嘗試提交表單，它會自動切換到相應的面板。 我找到了一種方法來更改面板的標題顏色，但我無法找到像我通常爲手動導航一樣更改V形箭頭的方法。

單面板的編碼方式類似於：

<!-- DEFAULT --> 
<div class="panel panel-primary"> 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1"> 
    <h4 class="panel-title"> 
     <a class="accordion-toggle">MAIN</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse in"> 
    <div class="panel-body"> 
    <fieldset>   

    <!-- Name input--> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="SiteName">Site Name</label> 
     <div class="col-md-6"> 
     <input id="SiteName" name="SiteName" type="text" maxlength="50" placeholder="write a short title" class="form-control input-md" required="required" value=""> 
     <span class="help-block">Please write the site name, keep it short</span> 
     </div> 
    </div> 

    </fieldset>   
    </div> 
    </div> 
</div> 
<!-- DEFAULT --> 

我做了一個工作示例簡單的jsfiddle來看看：https://jsfiddle.net/w1phk2fy/

感謝您的幫助

編輯： 我自己找到答案並在此發帖解答：

// toggleChevron 
      $(".panel-heading").find("i.indicator").removeClass("glyphicon-chevron-down"); 
      $(".panel-heading").find("i.indicator").addClass("glyphicon-chevron-right"); 
      $(this).closest(".panel-collapse").parent().find("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-right'); 

這裏工作的jsfiddle：https://jsfiddle.net/zfyhexxs/

Answer 1

要控制手風琴，使用方法：

.collapse('hide'); 
.collapse('show'); 

這樣一來，該框架將管理每個面板的狀態和類爲您服務。

在你的代碼，顏色和山形箭頭，當用戶點擊該按鈕時纔會更新，所以你必須綁定這些更改事件hide.bs.collapse和show.bs.collapse，如你最初在做toggleChevron函數。您還需要去除一些冗餘，並添加一些其他的調整，所以檢查更新的小提琴：

JSFIDDLE