Pfeil dreht sich um 180 Grad, wenn man auf das Dropdown-Menü klickt

Question

Ich habe ein Dropdown-Menü und möchte, dass der Pfeil rechts daneben 180 Grad anzeigt, wenn ich darauf klicke! Das Problem ist, dass ich den Pfeil im HTML und nicht im Javascript gesetzt habe. Aber ich dachte, es gab vielleicht einen Weg, es in den CSS zu bringen, wenn man von #navi nach #navigation geht.

Hier ist mein Code

<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">

Leider habe ich es nicht funktionieren scheinen, können .. Vielen Dank für jede Hilfe, die Sie geben können!

(wenn Sie das tatsächliche exemple auf www.typhotoshop.tumblr.com es wollen in der linken Schweben bar)

Answer 1

Alles, was Sie zu tun haben, css3 Übergang auf den Pfeil Hinzufügen und das Hinzufügen/Entfernen eines benutzerdefinierten Klasse um diese 180 ° zu drehen, in dem der Übergang ausgelöst wird.

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

hinzufügen in js der toggleclass wenn Klick auf navi

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

unten Arbeits Schnipsel:

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

Sie css Ihren Wunsch Ausgang tun, können Sie als gut

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