Question

我希望在再次点击图标时将图标旋转到旧状态，而不会丢失当前功能。目前的特点：

图标将旋转180度。
图标将在其他图标或外部点击时旋转。

使用此功能我想添加一个新功能，即当我们再次点击它时，图标需要旋转回来。

＆＃13;

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

＆＃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;

Answer 1

    var isChanged=true
    function rotate(e){

      document.getElementById("me").className="spinner fa fa-caret-down"+ (isChanged?"in":"out");

      isChanged=!isChanged;

      e.stopPropagation();
    }

类似地，你可以为rotatea

做

Answer 2

检查您是否已将类添加到 i标记 以旋转并退出该功能。要检查元素已经有一个类，请使用以下代码，

document.querySelector("#you").classList.contains("in")

＆＃13;

function rotate(e) {
  // Check is already rotated and return
  if (document.querySelector("#me").classList.contains("in")) {
    resetRotation();
    return;
  }
  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) {
  // Check is already rotated and return
  if (document.querySelector("#you").classList.contains("in")) {
    resetRotation();
    return;
  }
  resetRotation();
  document.getElementById("you").className = "spinner in fa fa-caret-down";
  e.stopPropagation();
}

document.addEventListener('click', resetRotation);

＆＃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">
<div style="padding:20px;">
  <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>
</div>

＆＃13;

我想再次点击它时将图标旋转到它的旧状态

2 个答案: