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

Question

I have a dropdown menu and want the arrow on the right of it to turn 180deg when I click on it! The problem is I've set the arrow in the html and not in the javascript.. But I thought there was maybe a way to put it in the css when going from #navi to #navigation..

Here's my 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"> 

Sorry I can't seem to make it work.. Thank you for any help you can give!

(if you want the actual exemple it's on www.typhotoshop.tumblr.com in the left hovering bar)

Answer 1

All you have to do is , adding css3 transition on your arrow , and adding/removing a custom class to this last to rotate 180° , in which the transition is triggered.

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

add in js the toggleclass when click on navi

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

bellow working snippet :

 $(document).ready(function(){ $("#navi").click(function(){ $("#navi .fa-chevron-down").toggleClass("rtoate180"); $("#navigation").stop().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

you can use css to do your desire output as well

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