jQuery: удалить класс, если щелкнуть тот же элемент - PullRequest
Новая
       3

jQuery: удалить класс, если щелкнуть тот же элемент

0 голосов
/ 21 января 2020

У меня есть некоторые элементы, которые расширяются (это похоже или совпадает с кодировщиком), когда у него есть класс "Active", он расширяется, и когда он касается другого элемента, класс "Active" удаляется.

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

Я хочу сделать то, что мой друг говорит, потому что у него есть логика c, но я действительно не знаю, как это сделать

У меня есть Jquery функция, подобная этой: 

(function($) {
  $("#product-accordion article")
    .click(function() {
      $(this).addClass("active");
      $(this).siblings().removeClass("active");
    });
})(jQuery);

1 Ответ

2 голосов
/ 21 января 2020

Проверьте hasClass, чтобы увидеть, является ли элемент, на который нажали, active, и добавьте класс, только если это не так: 

$("div").click(function() {
  const $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass("active");
  } else {
    $this.removeClass('active');
  }
  $this.siblings().removeClass("active");
});
.active {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>click</div>
<div>click</div>
<div>click</div>
<div>click</div>

Вы также можете использовать .toggleClass на элементе, по которому щелкнули: 

$("div").click(function() {
  const $this = $(this);
  $this.toggleClass("active");
  $this.siblings().removeClass("active");
});
.active {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>click</div>
<div>click</div>
<div>click</div>
<div>click</div>
...