javascript - 单击两次图标时如何旋转回来

Question

下面给出的代码用于创建侧边栏菜单。我在“应用程序”和“布局”内有两个下拉菜单，并且两个下拉菜单都附加了两个下拉图标。我想在单击时旋转回图标图标两次。我需要使用此代码附加/修改什么来实现这样的下拉菜单。

function rotateIcon(m) {
    var key=m;
    if(key===2)
        {
            document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
            document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
        }
    else if(key===3)
        {
            document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
            document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
        }
    else{
            document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
            document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
    }
}

.spinner-icon{
        /*float: right;
        padding-right: 5%;*/
        margin-top: 5%;
        /*margin-left:3rem;*/
        transition: all 0.5s linear;
}
.spinner-icon.in{
    transform: rotate(180deg);
}
.spinner-icon.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">
<li class="flip-container-main-menu-parent" id="flip-main-one" onclick="rotateIcon(1);"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
                    <li class="flip-container-main-menu-parent" id="flip-main-two" onclick="rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<li class="flip-container-main-menu-parent" id="flip-main-three" onclick="rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layout</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i>  </li>              
<li class="flip-container-main-menu-parent" id="flip-main-four"onclick="rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>

Answer 1

尝试将图标旋转回来

function rotateIcon(m) {
  var res = m;
  if (res == "first-drop-down-icon") {

    if (document.getElementById("first-drop-down-icon").className == "spinner-icon out fa fa-caret-down") {

      document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
    } else {
      document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
    }


  } else {
    if (document.getElementById("second-drop-down-icon").className == "spinner-icon out fa fa-caret-down") {

      document.getElementById("second-drop-down-icon").className = "spinner-icon in fa fa-caret-down";
       document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
    } else {
      document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
    }
  }



}

.spinner-icon {
  /*float: right;
        padding-right: 5%;*/
  /*margin-left:3rem;*/
  transition: all 0.5s linear;
}
.spinner-icon.in {
  transform: rotate(180deg);
}
.spinner-icon.out {
  transform: rotate(0deg);
}
li {
  list-style: none;
  margin: 3%;
}

<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">
<li class="flip-container-main-menu-parent" id="flip-main-one"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span>
</li>
<li class="flip-container-main-menu-parent" id="flip-main-two" onclick="rotateIcon('first-drop-down-icon');"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span>  <i id="first-drop-down-icon" class="spinner-icon out fa fa-caret-down"></i> 
</li>
<li class="flip-container-main-menu-parent" id="flip-main-three" onclick="rotateIcon('second-drop-down-icon');"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layout</span><i id="second-drop-down-icon" class="spinner-icon out fa fa-caret-down"></i> 
</li>
<li class="flip-container-main-menu-parent" id="flip-main-four"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span>
</li>