2回クリックするとアイコンを戻す方法

Question

以下のコードを使用してサイドバーmenu.iを作成します。この中に2つのドロップダウンメニューがあり、その中には2つのドロップダウンアイコンがあります。 .iアイコンをダブルクリックするとアイコンを元に戻したいのですが、このようなドロップダウンメニューを実装するには、このコードで添付/変更する必要があります。

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

それは古い機能だ失われたあなたのhelp.but（すなわち、クリックのアイコンに

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>