ドロップダウンメニューをクリックすると矢印が180度回転します

Question

私はドロップダウンメニューを持っています。その右の矢印をクリックすると180度回転します。問題は、私は、JavaScriptのではなく、HTMLで矢印を設定している..しかし、＃ナビから#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">

..あなたが与えることができる任意のヘルプをありがとう！

（あなたが実際exempleをしたい場合、それは左のホバリングバーにwww.typhotoshop.tumblr.comにあります）

Answer 1

あなたがしなければならないのは、カスタムの削除/あなたの矢印でCSS3のトランジションを追加し、追加することであり、この最後のクラスを180°回転させると、トランジションがトリガされます。

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

作業スニペット怒鳴るナビ

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

をクリックするとtoggleclass JSに追加します。

$(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);