当李被点击时，旋转或更改字体非常棒

Question

我有以下ul li设置，当我单击li时，子菜单打开。我在li旁边还有一个字体很棒的插入符号，每次单击打开子菜单时，我都想将插入符号旋转180度，或者用fas fa-caret-up图标更改图标。有什么想法吗？

$( 'li.submenu a[href="#"]').click(function(e) {
e.preventDefault();
$(this).next().toggle();
return false;
});

ul.ul_submenu, ul.ul_submenu_2{
display:none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="submenu" id="atag">
<a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu">
<a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu">
<a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu">blabla</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 1

您可以使用.find()方法来获取标记，使用.toggleClass()来更改插入符号的方向，请注意，我在.toggleClass()中使用了类的数组，我会让您更改箭头的方向，但对我来说，caret-left表示关闭，caret-down表示打开，以下是工作片段：

$( 'li.submenu a[href="#"]').click(function(e) {
e.preventDefault();
$(this).next().toggle();
$(this).find('i').toggleClass(['fa-caret-down', 'fa-caret-left']);
return false;
});

ul.ul_submenu, ul.ul_submenu_2{
display:none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="submenu" id="atag"><a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu">blabla</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 2

您只需要一个toggleClass和i类上的一些样式。您可以直接用JS更改图标，更改i的类

$( 'li.submenu a[href="#"]').click(
function(e) {
e.preventDefault();
$(this).toggleClass('open');
$(this).next().toggle();
return false;
});

ul.ul_submenu, ul.ul_submenu_2{
display:none;
}
#atag a i {
transition: all .3s;
}
#atag a.open i {
transform: rotate(180deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="submenu" id="atag"><a href="#">Apparel & Accessories <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
<ul class="ul_submenu">
<li class="submenu">blabla</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>