當點擊下拉菜單時，箭頭轉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);