我想正确地旋转图标，点击相应的图标
我想正确地旋转图标，点击相应的图标
提问于 2016-08-24 06:18:45
在这个html代码中，我尝试旋转一个图标180度，点击相应的图标，然后在单击其他图标或外部时返回。这里的问题是，当单击第二个图标时，第一个图标不会返回，而第二个图标是不返回的，要么单击第一个图标，要么单击外部。怎么修呢？
function rotate(e){
document.getElementById("me").className="spinner in fa fa-caret-down";
e.stopPropagation();
}
function resetRotation(){
document.getElementById("me").className="spinner out fa fa-caret-down";
}
document.addEventListener('click', resetRotation);
function rotatea(e){
document.getElementById("you").className="spinner in fa fa-caret-down";
e.stopPropagation();
}.spinner {
transition: all 0.5s linear;
}
.spinner.in{
transform: rotate(180deg);
}
.spinner.out{
transform: rotate(0deg);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i>
<i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-24 06:38:11
function rotate(e){
resetRotation();
document.getElementById("me").className="spinner in fa fa-caret-down";
e.stopPropagation();
}
function resetRotation(){
document.getElementById("me").className="spinner out fa fa-caret-down";
document.getElementById("you").className="spinner out fa fa-caret-down";
}
function rotatea(e){
resetRotation();
document.getElementById("you").className="spinner in fa fa-caret-down";
e.stopPropagation();
}
document.addEventListener('click', resetRotation);.spinner {
transition: all 0.5s linear;
}
.spinner.in{
transform: rotate(180deg);
}
.spinner.out{
transform: rotate(0deg);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<i onclick="rotate(event)" id="me" class="spinner fa fa-caret-down "></i>
<i onclick="rotatea(event)" id="you" class="spinner fa fa-caret-down"></i>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39115733
复制相关文章
相似问题
腾讯云开发者
