Отключение после нажатия на addClass

Question

Я действительно новичок в jQuery.Я взял некоторый код для моего меню WordPress из некоторого учебного пособия, но я хочу добавить к нему некоторые настройки.Итак, что я ищу, так это когда li с классом «has-sub» нажимается, и он добавляет класс «open», я хотел бы, чтобы событие других элементов li, если у него не было класса «has»-sub ", чтобы добавить класс" отключен ".Моя цель - выделить другие пункты меню с помощью CSS-стилей, чтобы они были сосредоточены на том, что было нажато.Это возможно.Вот код JQuery у меня есть.

$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').hide();

  }
  else {
    element.addClass('open');
    element.children('ul').show();
    element.siblings('li').children('ul').hide();
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').hide();
  }
});

Answer 1

Я думаю, что вы ищете, это просто вопрос добавления и удаления классов CSS.

При нажатии добавьте greyed и удалите highlighted для всех элементов.
инверсия для элемента, по которому щелкнули.

Если вы просто улучшите стиль (не чувствующий усилий в этом демо) переключения двух классов ... У вас есть стартер.*

$('#cssmenu li.has-sub a').on('click', function(e){
  e.preventDefault();
  $(".has-sub").removeClass("highlighted").addClass("greyed");
  $(this).parents(".has-sub").addClass("highlighted").removeClass("greyed");
});

a{
  text-decoration:none;
  color:black;
}
.highlighted{
  background-color:cyan;
}
.highlighted a{
  color:red;
}
.greyed{
  background-color:#bbb;
}
.greyed a{
  color:#444;
}

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

<ul id="cssmenu">
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
</ul>