Поверните или измените шрифт awesome при нажатии 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(), I оставлю вам изменить направление стрелки, но для меня у меня будет 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>