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