Bootstrap 手风琴面板自动对焦于表单验证答案

【问题标题】：Bootstrap accordion panel autofocus on form validationBootstrap 手风琴面板自动对焦于表单验证
【发布时间】：2016-12-09 21:11:38
【问题描述】：

我仍在使用 Bootstrap3 手风琴组件开发一个界面。我在不同的面板中细分了 a 的一些字段，并且我在字段中添加了 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/

【问题讨论】：

标签： jquery forms validation twitter-bootstrap-3 bootstrap-accordion

【解决方案1】：

要控制手风琴，请使用以下方法：

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

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

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

JSFIDDLE

【讨论】：