Question

在这个html代码中，我试图在点击相应的图标时旋转180度的图标，并在点击其他图标或外部时返回。 这里的问题是第一个图标在点击第二个图标时没有返回，第二个图标没有返回点击第一个图标或点击外面。如何解决？

＆＃13;

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();
}

＆＃13;

.spinner {
  transition: all 0.5s linear;
}

.spinner.in{
  transform: rotate(180deg);
}
.spinner.out{
  transform: rotate(0deg);
}

＆＃13;

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

＆＃13;

我想点击相应的图标正确旋转图标

0 个答案: