Javascript 单击下拉菜单时箭头旋转180度

我有一个下拉菜单，当我点击它时，我希望它右边的箭头变成180度！问题是我在html中设置了箭头，而不是在javascript中。。但我想，当从“导航”到“导航”时，可能有一种方法可以将其放入css中

这是我的密码

$（文档）.ready（函数（）{
$（“#navi”）。单击（函数（）{
$（“#导航”）。幻灯片切换（500）；
});
});

#navi{
边缘顶部：10px；
左边距：20px；
宽度：170px；
高度：30px；
线高：30px；
左侧填充：10px；
溢出：隐藏；
颜色：{color:Navigation}；
背景：{颜色：导航背景}；
字体大小：12px；
文本对齐：左对齐；
}
#纳维一号{
位置：绝对位置；
左边距：77px；
边缘顶部：10px；
颜色：{color:Navigation}！重要；
字体大小：12px；
}
#航行{
边缘顶部：10px；
左边距：20px；
宽度：180px；
溢出：隐藏；
显示：无；
字体大小：12px；
背景：{颜色：导航背景}；
}
#导航a{
显示：块；
字体大小：12px；
线高：18px；
宽度：180px；
溢出：隐藏；
颜色：{color:Navigation link}；
边框底部：1px纯色{颜色：宽边栏背景}；
填充物：5px；
文本对齐：居中；
}
#导航a:悬停{
框阴影：插入180px 0{颜色：宽边栏背景}；
颜色：{color:Hover}；
-webkit过渡：所有.7都易于输入输出；
-moz转换：所有.7都易于输入输出；
-o型过渡：所有.7秒易于输入输出；
过渡：所有.7都易于输入输出；
}
#导航a{
-webkit过渡：所有.7都易于输入输出；
-moz转换：所有.7都易于输入输出；
-o型过渡：所有.7秒易于输入输出；
过渡：所有.7都易于输入输出；
}

导航

您所要做的就是在箭头上添加css3转换，并在最后一个类中添加/删除自定义类，以旋转180°，在其中触发转换

#navi .fa-chevron-down {
  transition: all 0.5s ease;
}
.rtoate180 {
  transform: rotate(180deg);
}

单击navi时将js添加到toggleclass中

$("#navi .fa-chevron-down").toggleClass("rtoate180");

下面是工作片段：

$（文档）.ready（函数（）{
$（“#navi”）。单击（函数（）{
美元（“#navi.fa雪佛龙向下”）。toggleClass（“rtoate180”）；
$（“#导航”）.stop（）.slideToggle（500）；
});
});
#navi.fa雪佛龙下降{
过渡：所有0.5s缓解；
}
.180{
变换：旋转（180度）；
}
#纳维{
边缘顶部：10px；
左边距：20px；
宽度：170px；
高度：30px；
线高：30px；
左侧填充：10px；
溢出：隐藏；
颜色：{color:Navigation}；
背景：{颜色：导航背景}；
字体大小：12px；
文本对齐：左对齐；
}
#纳维一号{
位置：绝对位置；
左边距：77px；
边缘顶部：10px；
颜色：{color:Navigation}！重要；
字体大小：12px；
}
#航行{
边缘顶部：10px；
左边距：20px；
宽度：180px；
溢出：隐藏；
显示：无；
字体大小：12px；
背景：{颜色：导航背景}；
}
#导航a{
显示：块；
字体大小：12px；
线高：18px；
宽度：180px；
溢出：隐藏；
颜色：{color:Navigation link}；
边框底部：1px纯色{颜色：宽边栏背景}；
填充物：5px；
文本对齐：居中；
}
#导航a:悬停{
框阴影：插入180px 0{颜色：宽边栏背景}；
颜色：{color:Hover}；
-webkit过渡：所有.7都易于输入输出；
-moz转换：所有.7都易于输入输出；
-o型过渡：所有.7秒易于输入输出；
过渡：所有.7都易于输入输出；
}
#导航a{
-webkit过渡：所有.7都易于输入输出；
-moz转换：所有.7都易于输入输出；
-o型过渡：所有.7秒易于输入输出；
过渡：所有.7都易于输入输出；
}

航行

菜单
菜单
菜单

您也可以使用css来完成所需的输出

 margin-top: 100px;
 transform: rotateY(180deg);

在执行切换时，不能将类更改为fa chevron up吗？