我只是想知道如何在每个手风琴菜单上旋转我的小雪佛龙图标。 （不只是跳到这一点，但实际上有动画效果并旋转）
感谢!!!!
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script><!-- Latest compiled and minified CSS -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity=
"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
rel="stylesheet"><!-- Optional theme -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity=
"sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
rel="stylesheet"><!-- Latest compiled and minified JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="common.css">
<title></title>
</head>
<body overflow:hidden>
<div id="header">
<a href="frontend.html">
<img src="logo.png" alt="logo image" style="width:50%;height:50%;">
</a>
</div>
<!-- drop down menu for desktop-->
<div id="website">
<ul >
<div class="dropdown" >
<li><a href="#about" >About ▾</a>
<ul class="dropdown">
<li><a href="#">Staff</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#Contact">Contact</a>
<ul class="dropdown">
<li><a href="#">Employee Contacts</a></li>
<li><a href="#">Corporate Contacts</a></li>
<li><a href="#">Join Our Team</a></li>
</ul>
</li>
</div>
</ul>
</div>
<!--drop down menu for mobile-->
<div id="mobileHover">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">History</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Our Mission</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Employee Contacts</a></li>
<li><a href="#">Corporate Contacts</a></li>
<li><a href="#">Join Our Team</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="streamline.png" alt="steamline">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="synergy.png" alt="synergy">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="impact.png" alt="impact">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
</div>
<div id="wantit">
<h3>What We Offer</h3>
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.</p>
<h3>Testimonials</h3>
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.</p>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"><a data-target="#collapseOne"
data-toggle="collapse" href="#collapseOne">What We Offer
</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.
</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.
</p>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-target=
"#collapseTwo" data-toggle="collapse" href=
"#collapseTwo">Testimonials</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i></h4>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.
</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.
</p>
</div>
</div>
</div>
</div><!-- Post Info -->
<script>
if($(window).width() > 992){
console.log('test');
$("#accordion").remove();
$("#mobileHover").remove();
}else{
console.log($(window).width());
$("#wantit").remove();
$("#website").remove();
$(accordion).ready(function(){
$('#collapseOne').on('shown', function () {
$(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-right pull-right");
});
$('#collapseOne').on('hidden', function () {
$(".indicator glyphicon glyphicon-chevron-right pull-right").removeClass("indicator glyphicon glyphicon-chevron-right pull-right").addClass("indicator glyphicon glyphicon-chevron-down pull-right");
});
});
$('.accordion').on('show', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
}).on('hide', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-up pull-right").removeClass("indicator glyphicon glyphicon-chevron-up pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
});
}
</script>
</body>
</html>
顺便说一句，它就在最后！
答案 0 :(得分：0)
$(".rotate").click(function(){
$(this).toggleClass("down") ;
}).rotate{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="fa fa-chevron-up rotate"></div></a>
答案 1 :(得分：0)
<强>类
.indicator{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.indicator.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
<强> JS
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass("down");
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>