如何使用jQuery实现手风琴组件加号图标平滑过渡为减号的效果

实现方案 #

你只需要修改3部分代码即可实现平滑的加减号切换动画：

1. 修正HTML笔误

你第一个手风琴的减号图标标签存在语法错误，先修正：

<!-- 原错误写法 -->
<i class="fas fa-minus</i>
<!-- 修正后 -->
<i class="fas fa-minus"></i>

2. 新增/修改CSS规则

给图标加过渡动画规则，控制激活前后的显示状态：

/* 原有.acc-trigger i 规则修改为如下内容 */
.acc-trigger i {
    position: absolute;
    right: 0;
    width: 50px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: all 0.3s ease; /* 和内容展开动画时长保持一致 */
}
/* 新增默认状态规则 */
.acc-trigger .fa-minus {
    opacity: 0;
    transform: translateY(-50%) rotate(-180deg);
}
/* 新增激活状态规则 */
.acc-trigger.active .fa-plus {
    opacity: 0;
    transform: translateY(-50%) rotate(180deg);
}
.acc-trigger.active .fa-minus {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
}

3. 修改JS逻辑

点击时同步切换标题栏的激活状态：

jQuery(document).ready(function($) {
    $(".acc-trigger").click(function() {
        // 先清空所有元素的激活状态
        $('.acc-para').removeClass('active');
        $('.acc-trigger').removeClass('active');
        // 给当前点击的元素加激活状态
        $(this).addClass('active').closest('.accordion-area').find('.acc-para').addClass('active');
    });
});

最终效果：点击展开时加号旋转180度淡出、减号从倒置状态转正淡入，收起时动画反向执行，和内容展开的过渡效果完全同步。

内容的提问来源于stack exchange，提问作者RuntyBeef