javascript - Arrow turning 180deg when clicking on dropdown menu - Stack Overflow

admin管理员组

文章数量:1323707

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

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. in the left hovering bar)

• javascript
• html
• css
• drop-down-menu
• rotation

Share Improve this question Follow asked May 8, 2017 at 17:39 MaëlleMaëlle 65333 gold badges1313 silver badges2727 bronze badges 1

• Can't you change the class to fa-chevron-up when performing the toggle? – Simon Commented May 8, 2017 at 17:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>

you can use css to do your desire output as well

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

<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="navigation"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
 
<div id="navigation">
 
<div id="navigationin">

本文标签： javascriptArrow turning 180deg when clicking on dropdown menuStack Overflow