jquery - Bootstrap Accordion 面板自动聚焦于表单验证

Question

我仍在使用 Bootstrap3 Accordion 组件开发一个界面。 我在不同的面板中分割了一些字段，并且在字段中添加了一些强制性要求。 现在，如果用户尝试提交表单，它会自动切换到相应的面板。 我找到了一种更改面板标题颜色的方法，但我无法找到一种方法来更改 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

要控制 Accordion ，请使用以下方法:

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

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

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

JSFIDDLE