Javascript 在jQuery中使用toggleClass时如何停止所有类的切换

我想在jQuery中使用toggleClass时停止所有类的切换

我使用以下代码实现了jQuery函数，可以将图标切换180度

$(".treeparent").click(function () {
  $(this).next('.arrow').toggleClass('flip');
});

HTML:

CSS

然后所有图标都旋转180度。我想做的是只旋转单击的div图标。为了解决这个问题，我使用了以下代码

$(".treeparent").click(function () {
  $(this).next('.arrow').toggleClass('flip');
});

---

但是旋转也不起作用。如何解决此问题？

您可以获取最近的div，即：

菜单文本

，然后使用

.find（）

获取需要切换类的

演示代码：

$（“.treeparent”）。单击（函数（）{
//获取此最近的->查找箭头类切换类或使用.closest（“li”）
$（this）.closed（“.menu text”）.find（.arrow”）.toggleClass（'flip'）；
});
.arrow{
-moz转变：转变0.6s；
-webkit转换：转换0.6s；
转变：转变0.6s；
}
.翻转{
变换：旋转（-180度）；
}


{{@key}}


{{{this.label}}}





{{@key}}


{{{this.label}}}


{{{this.label}}}


{{{this.label}}}



在本例中，由于
中包含了
。箭头
。treeparent
您应该能够修改此按钮的单击功能

$（“.treeparent”）。单击（函数（）{
$（“.arrow”，this.toggleClass（'flip'）；
});

$（选择器，元素）
将查找给定
元素
中包含的
选择器
，在本例中，这是单击的
。树部分

注：如果您计划使用neested元素，我建议将选择器更改为
>。箭头
，因此只指向第一个子元素

嗯

感谢@Swati提供代码片段


$（“.treeparent”）。单击（函数（）{
$（“.arrow”，this.toggleClass（'flip'）；
});
.arrow{
-moz转变：转变0.6s；
-webkit转换：转换0.6s；
转变：转变0.6s；
}
.翻转{
变换：旋转（-180度）；
}


{{@key}}


{{{this.label}}}





{{@key}}


{{{this.label}}}


{{{this.label}}}


{{{this.label}}}



您需要包含HTML，以查看.treeparent和.arrow的使用情况related@freedomn-我用添加HTML部分编辑了这个问题，我认为最简单的解决方案是为您希望切换的标记添加一个id，然后只需根据它的id进行查询
.arrow {
    -moz-transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    transition: transform 0.6s;
  }

.flip {
    transform: rotate(-180deg);
}

$(".treeparent").click(function () {
  $(this).next('.arrow').toggleClass('flip');
});