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

时间:2016-02-02 09:04:49

标签: jquery twitter-bootstrap twitter-bootstrap-3

当我点击根文档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/

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

1 个答案:

答案 0 :(得分: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/