我有一些扩展的元素(它与编码器相似或相同),当它具有“ Active”类时,它会扩展,而当它接触另一个元素时,“ Active”类会被删除。
问题出现在一个朋友的建议下,他希望通过单击同一项目而不是另一个项目来关闭打开的同一项目,希望它能让我理解。
我想做我朋友说的话,因为他有逻辑,但是我真的不知道该怎么做
我有这样的Jquery函数:
(function($) {
$("#product-accordion article")
.click(function() {
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
})(jQuery);
答案 0 :(得分:2)
检查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>