如何为Bootstrap折叠存档多个图标更改？

Question

当我点击根文档1和根文档2时，图标应更改为“glyphicon-triangle-bottom”到“glyphicon-triangle-right”。

在根文档1和根文档2的子列表中，图标应在“glyphicon-triangle-right”上更改为“glyphicon-triangle-bottom”。

以下脚本在子列表中存在冲突

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-right").first().removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-triangle-bottom").first().removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
});

参考链接：

http://jsfiddle.net/R6EAW/3150/

如何在没有冲突的情况下归档相同内容 请建议我真的很感激。

Answer 1

尝试：

$('.glyphicon').on('click', function(){
if($(this).hasClass('glyphicon-triangle-right')) {
$(this).removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
} else {
$(this).removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
}
});

的jsfiddle：http://jsfiddle.net/7aseco56/