单击元素时如何旋转元素的子元素？答案

【问题标题】：How to rotate a child of an element when we click the element?单击元素时如何旋转元素的子元素？
【发布时间】：2020-10-07 06:57:54
【问题描述】：

我在标签中有一个跨度标签，用于在文本之后显示一个人字形我想在单击 a 标签后仅旋转跨度，如果 a 标签没有类“折叠”（因为如果这样做就意味着它已关闭）

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>

编辑：我使用原始项目FIDDLE创建了一个sn-p

【问题讨论】：

您的 JS 无效 - 为什么 document.ready 在函数内？还有 click().firstChild 闻起来像一厢情愿。请查阅文档。你从哪里得到.rotate()？插件？如果您需要插件，请更新我为您制作的 sn-p
它在一个函数中，因为我正在使用 angular 并将它放在一个 component.ts 函数中
那当然是缺少信息。也许做一个minimal reproducible example
.click().firstChild( 仍然不是有效的 jQuery - 也许你的意思是 $('a.collapse').on("click",function() { $(this).find(".fa-chevron-left").rotate($(this).is(".collapsed")?90:-90); }) 假设你在某处有一个旋转功能

标签： javascript html jquery

【解决方案1】：

您可以通过一点 css 轻松实现这一点。使用过渡属性，您可以根据需要调整动画。

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

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

【讨论】：

@lolozemadnessgamer 请注意我使用的是i.fa-chevron-left。您的 html 有一个跨度，您可以尝试将 i.fa-chevron-left 替换为 span.fa-chevron-left。我也会更新上面的sn-p
它添加了 span 和一个“s”来转换 ^^ 转换 -> 转换
不错不错，我也要把 S 添加到 sn-p 中