Отключение после onclick addClass

#jquery #onclick #toggle

#jquery #onclick #переключение

Вопрос:

Я действительно новичок в jQuery. Я взял некоторый код для своего меню WordPress из какого-то руководства, но я хочу добавить к нему некоторые настройки. Итак, что я ищу, это когда нажимается li с классом «has-sub» и добавляется класс «open», я бы хотел, чтобы событие other li elements, если у него нет класса «has-sub», добавляло класс «disabled». Моя цель — выделить другие пункты меню серым цветом с помощью стиля 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();
  }
});

1. Звучит неправильно. Допустим, у вас есть список ссылок, выделенных синим цветом. Я нажимаю на один, и он становится красным (добавлен класс «open», который делает его красным), но зачем мне делать все мои ссылки серыми? Они больше не доступны для нажатия? Я думаю, что вы хотите удалить open class из всех ссылок и добавить его только к той, на которую нажат. Таким образом, только одна ссылка, по которой щелкнули, будет красной.

2. Итак, вы в основном хотите «выделить» выбранный элемент… Можете ли вы опубликовать отрисованную структуру? и классы CSS, которые вы имеете в виду…

Ответ №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>