我在一个标记中有一个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创建了一个片段
您可以通过一点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);
}