我仍在使用Bootstrap3手风琴组件开发一个界面。我在不同的面板中细分了a的某些字段，并在字段中添加了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/
感谢您的任何帮助
编辑：我自己找到了答案，并在此处发布了解决方案：
// 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');
这样，框架将为您管理每个面板的状态和类。
在代码中，仅当用户单击按钮时才更新颜色和人字形箭头，因此，必须像最初使用toggleChevron函数所做的那样，将这些更改绑定到事件hide.bs.collapse和show.bs.collapse。。您还需要删除一些冗余并添加其他一些调整，因此请检查更新的小提琴：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句