点击下拉菜单时箭头翻转180度。

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的左侧悬停栏）

- Maëlle

---

当执行切换操作时，您不能将类更改为fa-chevron-up吗？ - Simon

Answer 1

您只需要在箭头上添加CSS3过渡效果，并向最后一个元素添加/删除自定义类以旋转180度，触发过渡效果即可。

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

在JavaScript中，当点击导航时，可以添加toggleclass。

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

以下是可用的代码片段：

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

- Bourbia Brahim

Answer 2

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

- shakthi blazingcoders

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

当我点击“运行代码片段”时，它显示“错误：{ "message": "未捕获的语法错误：意外的标记'<'", "filename": "https://stacksnippets.net/js", "lineno": 75, ... - Max

Answer 3

你也可以使用CSS来实现你想要的输出

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

- Akankha Ahmed