jQuery переключить цвет текста с себя и удалить с других

Question

Я новичок в jQuery / js, и я пытаюсь переключать цвета при нажатии с помощью jQuery. Мне нужно что-то вроде этого:

Когда я щелкаю элемент, он переключает класс, чтобы изменить цвет. Если я щелкну элемент один раз, он изменит цвет. Затем, если я щелкну другой элемент, он изменит цвет, но другие элементы должны вернуться к своему исходному цвету.

Мне удается переключить цвет каждого элемента, но я не могу удалить цвет класса из других.

Только <li> с переключателем подменю классов должен изменять цвета. ul 2-го уровня не должны менять li. Окончательный код выглядит примерно так:

$(".submenu-toggler a").click(function(){
  $(this).siblings().removeClass('red');
  $(this).toggleClass("red");
});

a {
  color: gray;
}

.red {
  color: red; 
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-nav-menu" class="menu-hide">
  <li><a href="#">Item1</a></li>
  <li class="submenu-toggler">
    <a href="#" class="sub-toggler-a">Toggler<span></span></a>
    <ul id="submenu-1" class="main-nav-submenu">
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub2</a></li>
        <li><a href="#">sub3</a></li>
        <li><a href="#">sub4</a></li>
    </ul>
    </li>
    <li><a href="#">Item3</a></li>
    <li><a href="#">Item4</a></li>
    <li class="submenu-toggler">
      <a href="#" class="sub-toggler-a">Toggler<span></span></a>
      <ul id="submenu-2" class="main-nav-submenu">
          <li><a href="#">sub1</a></li>
          <li><a href="#">sub2</a></li>
          <li><a href="#">sub3</a></li>
      </ul>
  </li>
  <li><a href="">Item6</a></li>
</ul>

Answer 1

Я считаю, что это то, что вы ищете, используя .siblings(), все, что вам нужно сделать, - это удалить класс .red из элементов братьев и сестер, а затем выполнить переключение на текущем клике element

Update : теперь он работает для других элементов, обратите внимание, что я добавил селектор .red *, чтобы субэлементы также были окрашены в красный цвет:

$(".item").click(function(){
  $(this).siblings().removeClass('red');
  $(this).toggleClass("red");
});

li { 
  color: grey;
}

.red,
.red *{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="item"><a>Item 1</a></li>
  <li class="item"><a>Item 2</a></li>
  <li class="item">
    <a>Item 3</a>
    <span>AA</span>
    <ul>
      <li>AA</li>
      <li>AA</li>
    </ul>
  </li>
</ul>



<ul id="main-nav-menu" class="menu-hide">
  <li class="item"><a href="#">Item1</a></li>
  <li class="item submenu-toggler">
    <a href="#" class="sub-toggler-a">Toggler<span></span></a>
    <ul id="submenu-1" class="main-nav-submenu">
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub2</a></li>
        <li><a href="#">sub3</a></li>
        <li><a href="#">sub4</a></li>
    </ul>
    </li>
    <li class="item"><a href="#">Item3</a></li>
    <li class="item"><a href="#">Item4</a></li>
    <li class="item submenu-toggler">
      <a href="#" class="sub-toggler-a">Toggler<span></span></a>
      <ul id="submenu-2" class="main-nav-submenu">
          <li><a href="#">sub1</a></li>
          <li><a href="#">sub2</a></li>
          <li><a href="#">sub3</a></li>
      </ul>
  </li>
  <li class="item"><a href="">Item6</a></li>
</ul>