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

Bootstrap accordion panel autofocus on form validation

我仍在使用 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/

要控制手风琴,使用方法:

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

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

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

JSFIDDLE