jQuery toggleClass触发所有元素，如何仅切换当前点击按钮的类

解决方案 #

你的代码问题出在使用了全局选择器$(".plus-button")，会匹配页面内所有符合类名的按钮，导致每次点击所有按钮同步切换open类。只需要将查找范围限定在当前点击的.secondLayer元素内部即可，修改后的JS代码如下：

$(".secondLayer").click(function() {
  $(this).find(".plus-button").toggleClass("open");
});

如果要实现更流畅的加号转减号动画，可以调整你的CSS规则中.open对应的变换属性，修改后如下：

.open.plus-button .plus-icon:before {
  transform: rotate3d(0, 0, 1, 0deg);
}

修改后点击对应区域只会切换当前所属的加号按钮状态，动画效果也会正常触发。

内容的提问来源于stack exchange，提问作者BB23