提问者:小点点

当我们单击元素时,如何旋转元素的子元素? [副本]


我在一个标记中有一个span标记,在一个文本后显示一个人字形,我只想在单击a标记时旋转span,如果a标记没有“折叠”类,则向后旋转(因为如果折叠了,就意味着它已关闭)

null

rotatearrow() {
    $(document).ready(() => {
        if ($('a.collapse').hasClass("collapsed")) {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(90);
        }else {
            $('a.collapse').click().firstChild("i.fa-chevron-left").rotate(-90);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li>
        <a class="collapsed collapse active" data-target="#TPs" data-toggle="collapse">
            <i class="fas fa-file-word"></i>
            <span class="nav-label">TP</span>
            <span class="fa fa-chevron-left float-right"></span>
        </a>
    </li>
</ul>

null

编辑:我使用原始的project FIDDLE创建了一个片段


共1个答案

匿名用户

您可以通过一点CSS轻松地实现这一点。 使用transition属性,您可以根据需要调整动画。

.collapse span.fa-chevron-left {
    transform: rotate(90deg);
    transition: transform 0.25s ease-in-out;
}

.collapse.collapsed span.fa-chevron-left {
    transform: rotate(0deg);
}