当点击下拉菜单时，箭头转180deg

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°，其中转换被触发。

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

添加在JS的toggleclass当点击导航

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

波纹管工作片断：

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

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

 
#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; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navi"> NAVIGATION 
 
    <i class="fa fa-chevron-down"></i> 
 
</div> 
 
    
 

 
<div id="navigation"> 
 
    <ul> 
 
    <li>menu</li> 
 
    <li>menu</li> 
 
    <li>menu</li> 
 
    </ul> 
 
</div> 
 
    
 
<div id="navigationin"></div>

Answer 2

您可以使用CSS做你的愿望输出井

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