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

I want to spin the icons correctly on click on corresponding icon

本文关键字：图标 旋转      更新时间：2023-09-26

在这个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>

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>

相关文章：