單擊 li 時旋轉或更改字體真棒

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

您只需要在i class 上設置一個 toggleClass 和一些樣式。 可以直接用JS改圖標，改i的class

 $( '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 ai { 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>