Bootstrap 手风琴面板在表单验证时自动对焦

Question

我仍在使用 Bootstrap3 手风琴组件开发一个界面。我在不同的面板中细分了 a from 的一些字段，并且我在字段中添加了 soem 要求作为强制性要求。现在，如果用户尝试提交表单，它会自动切换到相应的面板。我找到了一种更改面板标题颜色的方法，但我无法找到一种方法来更改人字形箭头，就像我通常为手动导航所做的那样。

单个面板编码如下：

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

感谢您的帮助

编辑：我自己找到了答案，post 这里的解决方案：

// 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');

这样，框架将为您管理每个面板的状态和类。

在您的代码中，颜色和 V 形箭头仅在用户单击按钮时更新，因此您必须将这些更改绑定到事件 hide.bs.collapse 和show.bs.collapse，就像您最初使用 toggleChevron 函数所做的那样。您还需要删除一些冗余并添加一些其他调整，因此请检查更新后的 fiddle:

JSFIDDLE

Bootstrap 手风琴面板在表单验证时自动对焦

Bootstrap accordion panel autofocus on form validation

forms

validation

jquery

twitter-bootstrap-3

bootstrap-accordion