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

Question

我有一个下拉菜单，当我点击它时，希望它右侧的箭头旋转 180 度！问题是我在 html 中设置了箭头，而不是在 javascript 中设置了箭头。但是我认为从 #navi 到 #navigation 时可能有一种方法可以将其放入 css 中。

这是我的代码

<script>
$(document).ready(function(){
  $("#navi").click(function(){
$("#navigation").slideToggle(500);
  });
});
</script>

#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
 
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
 
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}

 
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
 
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s  ease-in-out;
-o-transition: all .7s  ease-in-out;
transition: all .7s  ease-in-out;
}

#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s  ease-in-out;
-o-transition: all .7s  ease-in-out;
transition: all .7s  ease-in-out;
}

<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
 
<div id="navigation">
 
<div id="navigationin">

抱歉，我似乎无法使其工作。感谢您提供的任何帮助！

（如果您想要实际示例，请访问 www.typhotoshop.tumblr.com 左侧悬停栏中）

Answer 1

您所要做的就是在箭头上添加 css3 过渡，并在最后添加/删除自定义类以旋转 180\xc2\xb0 ，其中触发过渡。

\n\n

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

\n\n

点击navi时在js中添加toggleclass

\n\n

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

\n\n

以下工作片段：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

$(document).ready(function(){\r\n  $("#navi").click(function(){\r\n    $("#navi .fa-chevron-down").toggleClass("rtoate180");\r\n    $("#navigation").stop().slideToggle(500);\r\n  });\r\n});

\r\n

\r\n

\r\n

\n