通过JS实现切换和旋转图片

零、序言

最近一个项目中使用了 BootStrap 的折叠控件。有一个需求是需要在折叠控件的标题前加上一个表示折叠或展开的图标。如下图所示。

折叠：

展开：

一、解决方案

想要实现上述效果，有两个方案可实现。

1. 图标切换

第一种方式是通过两个不同的图标（图片）进行切换。由于项目中使用的是 FontAwsome 图标库的图标，不是图片。所以只需要切换 class 值即可，如果是图片切换图片即可。具体实现如下所示。

//标题的点击事件
$('#div_title').click(function () {
    //判断包含的图标类名，再通过移除和添加图标类名切换到另一个图标
    if ($("#icon").hasClass("fa-chevron-up")) {
        $("#icon").removeClass("fa-chevron-up");
        $("#icon").addClass("fa-chevron-down");
    }
    else {
        $("#icon").removeClass("fa-chevron-down");
        $("#icon").addClass("fa-chevron-up");
    }
});

2. 旋转图标

第二种方式是只使用一个图标（图片），通过旋转图标 180° 即可。具体实现如下所示。

//记录和判断需要旋转的角度
var angle = 0;
$('#div_title').click(function () {
    //判断需要旋转的度数
    angle_flag = angle_flag == 0 ? 180 : 0;
    //使图标旋转相应的角度
    $('#icon').css('transform', 'rotate(' + angle + 'deg)');
});