Html 如何在折叠和展开时更改引导3列表图标

我有一个带有子菜单的列表，当内容正在折叠和扩展时，我无法实现图标的更改

<!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
        <ul class="sidebar-menu">
                <li th:class="${CURRENT_MENU == 'Users' || CURRENT_MENU == 'Roles'}? 'active' : 'null'"
                    sec:authorize="hasAnyRole('ROLE_USERS','ROLE_ROLES')"
                    class="treeview" id="scrollspy-components"><a
                    href="javascript:void(0)"><i class="fa fa-user-circle-o"></i>
                        <span>User Management</span></a>
                    <ul class="nav treeview-menu">
                        <li th:class="${CURRENT_MENU == 'Users'}? 'active' : ''"
                            sec:authorize="hasRole('ROLE_USERS')"><a
                            href="#" th:href="@{'/users'}"> <i class="fa fa-users"></i><span>
                                    Users</span></a></li>

                        <li th:class="${CURRENT_MENU == 'Roles'}? 'active' : ''"
                            sec:authorize="hasRole('ROLE_ROLES')"><a
                            href="#" th:href="@{'/roles'}"> <i class="fa fa-tag"></i><span>
                                    Roles</span></a></li>

                    </ul>
                </li>
        </ul>
        </section>
    </aside>