Как сделать, чтобы не убирался активный класс?

Question

[vasilgut]

const servicesList = document.querySelector('.services__сategory');
  const activeClass = "active-category";
    
    servicesList.addEventListener("click", function(event) {
    const element = event.target.closest(".category-item");
    if (!element) return;
    
    const activeElement = element.parentElement.querySelector(".active-category");
    activeElement && activeElement.classList.remove(activeClass);
    (element === activeElement) || element.classList.add(activeClass);
    });

Как сделать, чтобы при клике на уже активный элемент класс .active-category не убирался?
Заранее большущее спасибо:)

Comments

[Сергей delphinpro]

Проверьте, является ли кликнутый элемент активным. И только если нет, убирайте активный класс.
Это в предпоследней строке, туда добавить проверку.

[alexalexes]

... и напишите нормально if при выполнении remove и add.

activeElement && activeElement.classList.remove(activeClass);
  (element === activeElement) || element.classList.add(activeClass);

Вам же не охота лишний раз разбирать, по какому принципу отрабатывает интерпретатор операции && и ||, есть дело не касается использования булевого результата?

[vasilgut]

Сергей delphinpro, Можете, если не сложно, скинуть ссылку на что-то подобное, не получается у меня почему-то

Answer 1

[Сергей delphinpro]

const servicesList = document.querySelector('.services__сategory');
const activeClass = "active-category";

servicesList.addEventListener("click", function(event) {
  const element = event.target.closest(".category-item");
  if (!element) return;

  const activeElement = element.parentElement.querySelector(".active-category");
  
  if (element !== activeElement) {
    activeElement.classList.remove(activeClass);
    element.classList.add(activeClass);
  }
});