Question

我有一些扩展的元素（它与编码器相似或相同），当它具有“ Active”类时，它会扩展，而当它接触另一个元素时，“ Active”类会被删除。

问题出现在一个朋友的建议下，他希望通过单击同一项目而不是另一个项目来关闭打开的同一项目，希望它能让我理解。

我想做我朋友说的话，因为他有逻辑，但是我真的不知道该怎么做

我有这样的Jquery函数：

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

Answer 1

检查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>

jQuery：如果单击相同的元素，则删除类

1 个答案: