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

Question

在这个html代码我试图旋转图标180度上点击相应的图标，并返回时，点击其他图标或外部。 这里的问题是，第一个图标没有返回时，点击第二个，第二个是不返回，要么点击第一个图标或点击outside.i想要解决它。我该如何解决这个问题？

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>

Answer 1

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>