javascript - 单击任何菜单项时悬停属性丢失

Question

在下面给出的代码中，我尝试为悬停属性 background-color 赋予值 blue。但它最初在我们选择任何菜单项(应用程序、布局、widjets 等)之前工作，然后它就不起作用了。我该如何修复它？

function functionButton() {                    
    document.getElementById("flip-up-menu").style.display = "block";
}
function buttonSec() {
    document.getElementById("flip-up-menu").style.display = "none"; 
}
function displaySubMenu(e) {
    var k = e;
    if (k === 2) {
        if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
            document.getElementById("sub-menu-one").style.display="none";
        }
        else{
                 document.getElementById("sub-menu-one").style.display = "block"; 
        document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "none";
        document.getElementById("flip-main-three").style.background = "none";
        document.getElementById("flip-main-four").style.background = "none";
        }
    } else if (k === 3) {
         if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
              document.getElementById("sub-menu-two").style.display="none";
         }
        else{
        document.getElementById("sub-menu-two").style.display = "block";
        document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";            
        document.getElementById("flip-main-one").style.background = "none";
        document.getElementById("flip-main-two").style.background = "none";
        document.getElementById("flip-main-four").style.background = "none";}
    } else if (k === 1) {
        document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)"; 
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-two").style.background = "none";
        document.getElementById("flip-main-three").style.background = "none";
        document.getElementById("flip-main-four").style.background = "none";
    } else if (k === 4) {
        document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "none";         
        document.getElementById("flip-main-three").style.background = "none";
        document.getElementById("flip-main-two").style.background = "none";
    } else {
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
    }
}
function rotateIcon(m) {
  var key = m;
if ( key === 2)
  {
   
   if(document.getElementById("first-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("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)
    {
      if(document.getElementById("second-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
      {
         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";
    }
}

    .flip-container-main-menu-parent{
         cursor: pointer;
         margin-left: -1rem;
        padding-left: 1rem;
        margin-right: -1rem;
        padding-bottom: .5rem;
    }
    .flip-menu-main-icon{
        float:none;
        margin-right:10px;
        margin-left: 0; 
        position: relative;
        top:0;
        min-width: 1.5rem;
        list-style-type: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
     }
    .fa.flip-menu-main-icon{
        font-size: 13px;
        width: 1em;
        height: 1em;
        line-height: 2.5rem;
        font-style: normal;
        font-weight: normal;
        opacity:1;
    } 
    .flip-menu-text{
        text-align: left;
        font-weight:500;
        line-height: 1.125rem;
        padding: .5625rem 0;
        margin: 0;
        outline: 0;
        border: 0;
        font-size: 14px;
    }
    .flip-sub-menu{
        opacity: 0.75;
        padding-top: .4375rem;
        padding-bottom: .4375rem;
        padding-right: 9.4rem;
        padding-left: 4rem;
        margin-left: -2rem;
        text-align: left;
        line-height: 1.125rem;
        display:block;
        background-color: rgba(24,33,118,1);
        color: rgba(255,255,255,.87)!important;
        width: 100%;
        display: none;
    }
    ul.flip-sub-menu li a{
        color: rgba(255,255,255,.87)!important;
        line-height: 2rem;
    }
    #flip-up-container .flip-up-container-main-menu-parent:hover
    {
        background-color: #122112;
    }
    #flip-up-container ul:hover{
        background-color: #122112;
    }
    .flip-container-sub-menu-one li a
    {
        color: white;
    }
    .flip-container-submenu-one li:hover{
        background-color: #0f0f3e;
    }
    .flip-container-sub-menu-two li a
    {
        color: white;
    }
    .flip-container-sub-menu-two li:hover{
        background-color: #0f0f3e;
    } 
    .flip-menu-drop-down-icon{
        float: right;
        padding-right: 5%;
        margin-top: 5%;
        margin-left:-3rem;
    }
.spinner-icon{
        font-size:13px;
        float: right;
        margin-top: 5%;
        margin-right: 7%;
        transition: all 0.3s ease-in-out;
        opacity:0.75;
}
.fa.spinner-icon{
    font-size: 13px;
}
.spinner-icon.in{
    transform: rotate(-180deg);
}
.spinner-icon.out{
    transform:rotate(0deg);
}
    .flip-container-main-menu-parent:hover {
        background-color:rgba(24,33,118,1);
        font-weight: 600;
    }
    .flip-sub-menu li:hover{
        background-color: rgba(120,130,140,.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">

                <ul class="flip-container-main-menu">
                    <li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><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="displaySubMenu(2);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>
                        <ul id="sub-menu-one" class="flip-sub-menu"> 
                            <li>   <a href="#">Inbox</a>    </li>
                            <li>   <a href="#">Condact</a>  </li>
                            <li>   <a href="#">Calendar</a> </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i>  </li>
                        <ul id="sub-menu-two" class="flip-sub-menu">
                            <li>    <a href="#">Header</a>  </li>
                            <li>    <a href="#">Aside</a>   </li>
                            <li>    <a href="#">Footer</a>  </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjets</span></li>
            </ul>
      

Answer 1

1. 不要将“none”设置为背景，因为这将是一个不受悬停效果影响的属性。
2. 只需删除带有空字符串的背景色即可。
3. 整理您的代码并使其更干净；) 您可以迭代某些元素并以 DRY 方式进行(不要重复自己)。

function functionButton() {                    
    document.getElementById("flip-up-menu").style.display = "block";
}
function buttonSec() {
    document.getElementById("flip-up-menu").style.display = "none"; 
}
function displaySubMenu(e) {
    var k = e;
    if (k === 2) {
        if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
            document.getElementById("sub-menu-one").style.display="none";
        }
        else{
                 document.getElementById("sub-menu-one").style.display = "block"; 
        document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "";
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-four").style.background = "";
        }
    } else if (k === 3) {
         if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
              document.getElementById("sub-menu-two").style.display="none";
         }
        else{
        document.getElementById("sub-menu-two").style.display = "block";
        document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";            
        document.getElementById("flip-main-one").style.background = "";
        document.getElementById("flip-main-two").style.background = "";
        document.getElementById("flip-main-four").style.background = "";}
    } else if (k === 1) {
        document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)"; 
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-two").style.background = "";
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-four").style.background = "";
    } else if (k === 4) {
        document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "";         
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-two").style.background = "";
    } else {
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
    }
}
function rotateIcon(m) {
  var key = m;
if ( key === 2)
  {
   
   if(document.getElementById("first-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("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)
    {
      if(document.getElementById("second-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
      {
         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";
    }
}

.flip-container-main-menu-parent{
         cursor: pointer;
         margin-left: -1rem;
        padding-left: 1rem;
        margin-right: -1rem;
        padding-bottom: .5rem;
    }
    .flip-menu-main-icon{
        float:none;
        margin-right:10px;
        margin-left: 0; 
        position: relative;
        top:0;
        min-width: 1.5rem;
        list-style-type: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
     }
    .fa.flip-menu-main-icon{
        font-size: 13px;
        width: 1em;
        height: 1em;
        line-height: 2.5rem;
        font-style: normal;
        font-weight: normal;
        opacity:1;
    } 
    .flip-menu-text{
        text-align: left;
        font-weight:500;
        line-height: 1.125rem;
        padding: .5625rem 0;
        margin: 0;
        outline: 0;
        border: 0;
        font-size: 14px;
    }
    .flip-sub-menu{
        opacity: 0.75;
        padding-top: .4375rem;
        padding-bottom: .4375rem;
        padding-right: 9.4rem;
        padding-left: 4rem;
        margin-left: -2rem;
        text-align: left;
        line-height: 1.125rem;
        display:block;
        background-color: rgba(24,33,118,1);
        color: rgba(255,255,255,.87)!important;
        width: 100%;
        display: none;
    }
    ul.flip-sub-menu li a{
        color: rgba(255,255,255,.87)!important;
        line-height: 2rem;
    }
    #flip-up-container .flip-up-container-main-menu-parent:hover
    {
        background-color: #122112;
    }
    #flip-up-container ul:hover{
        background-color: #122112;
    }
    .flip-container-sub-menu-one li a
    {
        color: white;
    }
    .flip-container-submenu-one li:hover{
        background-color: #0f0f3e;
    }
    .flip-container-sub-menu-two li a
    {
        color: white;
    }
    .flip-container-sub-menu-two li:hover{
        background-color: #0f0f3e;
    } 
    .flip-menu-drop-down-icon{
        float: right;
        padding-right: 5%;
        margin-top: 5%;
        margin-left:-3rem;
    }
    .spinner-icon{
        font-size:13px;
        float: right;
        margin-top: 5%;
        margin-right: 7%;
        transition: all 0.3s ease-in-out;
        opacity:0.75;
    }
    .fa.spinner-icon{
        font-size: 13px;
    }
    .spinner-icon.in{
        transform: rotate(-180deg);
    }
    .spinner-icon.out{
       transform:rotate(0deg);
    }
    .flip-container-main-menu-parent:hover {
        background-color:rgba(24,33,118,1);
        font-weight: 600;
    }
    .flip-sub-menu li:hover{
        background-color: rgba(120,130,140,.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">

                <ul class="flip-container-main-menu">
                    <li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><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="displaySubMenu(2);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>
                        <ul id="sub-menu-one" class="flip-sub-menu"> 
                            <li>   <a href="#">Inbox</a>    </li>
                            <li>   <a href="#">Condact</a>  </li>
                            <li>   <a href="#">Calendar</a> </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i>  </li>
                        <ul id="sub-menu-two" class="flip-sub-menu">
                            <li>    <a href="#">Header</a>  </li>
                            <li>    <a href="#">Aside</a>   </li>
                            <li>    <a href="#">Footer</a>  </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjets</span></li>
            </ul>