Javascript 单击其父元素时旋转子元素

每次单击按钮时，我想在按钮的箭头中进行动画转换。
这个想法是每次有人单击包含这些构成箭头的div的div时，将箭头（由div组成）的每一侧旋转180度

我试过用拨动开关，但没用。这是我的密码：

。返回按钮{
宽度：50px；
高度：50px；
背景色：#fff；
边界半径：100%；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
过渡：背景色0.3s；
光标：指针；
}
.按钮后退：悬停{
背景色：#2da6ff；
}
.左{
左：5%；
}
.对{
右：5%；
}
#左上角{
利润底部：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（-45度）；
左：30%；
背景：#E2；
z指数：3；
}
#左下角{
利润上限：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（45度）；
左：30%；
背景：#E2；
z指数：3；
}
#右上方{
利润底部：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（45度）；
左：40%；
背景：#E2；
}
#右下角{
利润上限：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（-45度）；
左：40%；
背景：#E2；
}

像这样试试看）

let left=document.querySelector（'.left'）；
让箭头=左。儿童；
函数{
箭头[0]。类列表。删除（'rotate-top'）；
箭头[1]。classList.remove（'rotate-bottom'）；
}
函数rotate（）{
箭头[0]。类列表。添加（'rotate-top'）；
箭头[1]。classList.add（'rotate-bottom'）；
setTimeout（去除剂，200）；
}
左。addEventListener（“单击”，旋转）
。返回按钮{
宽度：50px；
高度：50px；
背景色：#fff；
边界半径：100%；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
过渡：背景色0.3s；
光标：指针；
}
.按钮后退：悬停{
背景色：#2da6ff；
}
.左{
左：5%；
}
#左上角{
利润底部：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（-45度）；
左：30%；
背景：#E2；
z指数：3；
}
#左下角{
利润上限：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（45度）；
左：30%；
背景：#E2；
z指数：3；
}
.旋转顶部{
动画：将中心向上旋转0.3s线性二者；
}
.旋转底部{
动画：旋转中心和底部0.3s线性；
}
@关键帧从中心向上旋转{
0% {
变换：旋转（0）；
}
100% {
变换：旋转（135度）；
}
}
@关键帧从中心到底部旋转{
0% {
变换：旋转（0）；
}
100% {
变换：旋转（-135度）；
}
}
我认为您需要使用javascript来实现这一点


var left=document.getElementById（“left”）；
var right=document.getElementById（“right”）；
左。添加EventListener（“单击”，函数（e）{
如果（e.target.id！=“左”）返回；
e、 target.children[“0”].style.transition=“0.3s变换线性”；
e、 target.children[“1”].style.transition=“0.3s变换线性”；
e、 target.children[“0”].style.transform=“旋转（140度）”；
e、 target.children[“1”].style.transform=“旋转（-140度）”；
setTimeout（函数（）{
e、 target.children[“0”].style.transition=“0s全部线性”；
e、 target.children[“1”].style.transition=“0s全部线性”；
e、 target.children[“0”]。移除属性（“样式”）；
e、 target.children[“1”]。删除属性（“样式”）；
}, 510);
});
右。addEventListener（“单击”，函数（e）{
如果（e.target.id！=“right”）返回；
e、 target.children[“0”].style.transition=“0.3s变换线性”；
e、 target.children[“1”].style.transition=“0.3s变换线性”；
e、 target.children[“0”].style.transform=“旋转（-140度）”；
e、 target.children[“1”].style.transform=“旋转（140度）”；
setTimeout（函数（）{
e、 target.children[“0”].style.transition=“0s全部线性”；
e、 target.children[“1”].style.transition=“0s全部线性”；
e、 target.children[“0”]。移除属性（“样式”）；
e、 target.children[“1”]。删除属性（“样式”）；
}, 510);
});
。返回按钮{
宽度：50px；
高度：50px；
背景色：#fff；
边界半径：100%；
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
过渡：背景色0.3s；
光标：指针；
}
.按钮后退：悬停{
背景色：#2da6ff；
}
.左{
左：5%；
}
.对{
右：5%；
}
#左上角{
利润底部：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（-45度）；
左：30%；
背景：#E2；
z指数：3；
}
#左下角{
利润上限：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（45度）；
左：30%；
背景：#E2；
z指数：3；
}
#右上方{
利润底部：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（45度）；
左：40%；
背景：#E2；
}
#右下角{
利润上限：3倍；
宽度：15px；
高度：3倍；
位置：相对位置；
变换：旋转（-45度）；
左：40%；
背景：#E2；
}

这是我的解决方案

我添加了一个动画类，使元素以0.5秒的速度缓慢旋转动画

.animated {
  -moz-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s;
}

然后我制作了一个脚本来处理每个箭头线的旋转

$(document).ready(function() {
  var leftdegplus = -45;
  var leftdegminus = 45;
  var rightdegplus = 45;
  var rightdegminus = -45;
  $(".left").click(function() {
    leftdegplus = leftdegplus + 180;
    $(this).find("#left-top").css("transform", "rotate(" + leftdegplus + "deg)");

    leftdegminus = leftdegminus - 180;
    $(this).find("#left-bottom").css("transform", "rotate(" + leftdegminus + "deg)");

  });
  $(".right").click(function() {

    rightdegplus = rightdegplus - 180;
    $(this).find("#right-top").css("transform", "rotate(" + rightdegplus + "deg)");

    rightdegminus = rightdegminus + 180;
    $(this).find("#right-bottom").css("transform", "rotate(" + rightdegminus + "deg)");
  });


});

这是完整的代码片段：


$（文档）.ready（函数（）{
var-leftdegplus=-45；
var leftdegminus=45；
var rightdegplus=45；
var rightdegminus=-45；
$（“.left”）。单击（函数（）{
leftdegplus=leftdegplus+180；
$（this.find（“#left top”）.css（“transform”、“rotate（“+leftdegplus+”deg）”）；
LeftDeg减号=LeftDeg减号-180；
$（this.find（“#左下”）.css（“transform”、“rotate（“+leftdeg+”deg）”）；
});
$（“.right”）.clic