Question

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

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

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

JSFIDDLE

Bootstrap手风琴面板自动对焦于表格验证

1 个答案: