我想旋轉圖標正確點擊相應的圖標

在這個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>

來源

2016-08-24 Dream Hunter

我不知道誰是沒有作出任何評論 –

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>

來源

2016-08-24 06:38:11 z0mBi3

感謝反對投票抽搐......這就是我真正需要的 –

我想旋轉圖標正確點擊相應的圖標

回答

相關問題