Javascript 在展开菜单时旋转箭头，而不是在动画结束时旋转

单击后，菜单将展开，然后箭头将旋转。我想要的是，我一点击，菜单就应该展开，箭头应该平行旋转。我怎样才能做到这一点

$（文档）.ready（函数（）{
$（“.r-product-page#菜单>li>a”）。单击（函数（）{
$（'ul.sub-menu'）.not（$（this.sibbins（））.slideUp（“slow”）.parents（'product-menu'）.removeClass（'active'）；
$（this）.sides（“ul.sub菜单”）.slideToggle（“slow”，function（））{
if（$（this）.parents（'.product menu'）.hasClass（'active'））{
$（this）.parents（'.product menu'）.removeClass（'active'））
}else$（this）.parents（'.product menu'）.addClass（'active'）；
});
});
$（“.r-product-page#菜单#一”）。单击（函数（）{
$（“.product container”）.load（“productOne.html”）；
})
});
.r-product-page{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
}
.r-产品页#菜单{
身高：100%；
宽度：300px；
}
.r-product-page#菜单.产品菜单{
颜色：#4D49；
字号：18px；
}
.r-product-page#菜单.产品菜单.子菜单{
显示：无；
}
.r-product-page#菜单.product菜单.li子菜单{
颜色：#8989；
字体系列：18px；
}
保险商实验室{
列表样式：无；
}
.产品菜单.下拉箭头{
转变：转变2；
}
.product-menu.active.下拉箭头{
变换：旋转（180度）
}




x
y
z
l
m
n

















问题是因为在动画的回调中切换类，所以在动画结束时会发生这种情况。只需将该逻辑移入外部
单击
事件处理程序即可

还要注意，只需调用
toggleClass（）
，就可以简化整个
if
条件。试试这个：


$（文档）.ready（函数（）{
$（“.r-product-page#菜单>li>a”）。单击（函数（）{
var$a=$（本）；
$（'ul.sub-menu'）.not（$a.sides（））.slideUp（“slow”）.closest（'product-menu'）.removeClass（'active'）；
$a.closest（'.product menu'）。toggleClass（'active'）；
$a.slide（“ul.子菜单”）。滑动切换（“慢速”）；
});
$（“.r-product-page#菜单#一”）。单击（函数（）{
$（“.product container”）.load（“productOne.html”）；
})
});
.r-product-page{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
}
.r-产品页#菜单{
身高：100%；
宽度：300px；
}
.r-product-page#菜单.产品菜单{
颜色：#4D49；
字号：18px；
}
.r-product-page#菜单.产品菜单.子菜单{
显示：无；
}
.r-product-page#菜单.product菜单.li子菜单{
颜色：#8989；
字体系列：18px；
}
保险商实验室{
列表样式：无；
}
.产品菜单.下拉箭头{
转变：转变2；
}
.product-menu.active.下拉箭头{
变换：旋转（180度）
}




x
y
z
l
m
n