javascript - 如何在此下拉菜单中显示子菜单项

Question

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

//----------------------------display sub menu starts here---------------------------------------------------//

function displaySubMenu(e) {
    var k = e;
    if (k === 1) {
        if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right"){
            document.getElementById("sub-menu-one").style.display= "";
            alert("hai i'm in,you don't see me?");
        }
        else{
        document.getElementById("sub-menu-one").style.display = "block";
        alert("bro..this is my problem,the sub menu is not displaying...!");
        document.getElementById("sub-menu-two").style.display = "";
        document.getElementById("sub-menu-three").style.display = "";
        document.getElementById("sub-menu-four").style.display = "";
        }
    } else if (k === 2) {
         if(document.getElementById("second-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
              document.getElementById("sub-menu-two").style.display= "";
        }
        else{
        document.getElementById("sub-menu-two").style.display = "block";
        document.getElementById("sub-menu-one").style.display = ""; 
        document.getElementById("sub-menu-three").style.display = "";
        document.getElementById("sub-menu-four").style.display = "";}
    } else if (k === 3) {
         if(document.getElementById("third-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
              document.getElementById("sub-menu-three").style.display= "";
         }
        else{
        document.getElementById("sub-menu-three").style.display = "block";
        document.getElementById("sub-menu-one").style.display = ""; 
        document.getElementById("sub-menu-two").style.display = "";
        document.getElementById("sub-menu-four").style.display = "";}
    } else if (k === 4) {
         if(document.getElementById("fourth-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){
              document.getElementById("sub-menu-four").style.display= "";
         }
        else{
        document.getElementById("sub-menu-four").style.display = "block";
        document.getElementById("sub-menu-one").style.display = ""; 
        document.getElementById("sub-menu-three").style.display = "";
        document.getElementById("sub-menu-two").style.display = "";}
    }  else {
        document.getElementById("sub-menu-one").style.display = "";
        document.getElementById("sub-menu-two").style.display = "";
        document.getElementById("sub-menu-three").style.display = "";
        document.getElementById("sub-menu-four").style.display = "";
    }
}

 .menu-part{
        margin-top: 120px;
    }
    .menu-parent{
        color: #a6afbb;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        padding: 12px 15px!important;
        margin: 20px 0 0 -15px;
        font-family: 'Poppins',sans-serif;
    }
    .sub-menu{
        display: none;
    }
    .sub-menu-parent{
        padding-left: 10px;
        padding-top: 25px;
        font-weight: 300;
        color: black;
    }
    .sub-menu-header{
       /* float: left;*/
        padding-left:11px; 
        font-weight: 300;
        font
    }
    .fa.spinner-icon{
        float: right;
        padding-right: 0px;
        font-weight: 100;
    }
    .fa-sliders.menu-front-icon{
        transform: rotate(90deg);
    }
    .sub-menu-parent:hover{
        cursor: pointer;
    }
    .spinner-icon{
           /* font-size:13px;
            float: right;
            margin-top: 5%;
            margin-right: 7%;*/
            transition: all 0.6s ease-in-out;
            /*opacity:0.75;*/
    }
    /*.fa.spinner-icon{
        font-size: 13px;
    }*/
    .spinner-icon.in{
        transform: rotate(90deg);
    }
    .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">
              
<ul class="menu-part">
                    <li>
                        <ul class="menu-parent">--- MAIN MENU

                      <li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>  
                            <ul id="sub-menu-one" class="sub-menu"> 
                                <li>   <a href="#">Minimalistic</a>    </li>
                                <li>   <a href="#">Demographical</a>   </li>
                                <li>   <a href="#">Analetical</a>      </li>
                                <li>   <a href="#"> Simpler </a>       </li>
                            </ul>
                     </li>

                        <li class="sub-menu-parent" id="sub-menu-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="menu-front-icon fa fa-envelope-o"></i><span class="sub-menu-header">Apps</span> <i id="second-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> </li>
                            <ul id="sub-menu-one" class="sub-menu"> 
                                <li>   <a href="#">Inbox</a>    </li>
                                <li>   <a href="#">Condact</a>  </li>
                                <li>   <a href="#">Calendar</a> </li>
                            </ul>

                        <li class="sub-menu-parent" id="sub-menu-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="menu-front-icon fa fa-sliders"></i><span class="sub-menu-header">UI Elements</span><i id="third-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>  
                            <ul id="sub-menu-two" class="sub-menu">
                                <li>    <a href="#">Header</a>  </li>
                                <li>    <a href="#">Aside</a>   </li>
                                <li>    <a href="#">Footer</a>  </li>
                            </ul>
                        </li>
                        <li class="sub-menu-parent" id="sub-menu-four" onclick="displaySubMenu(4);rotateIcon(4);"><i class="menu-front-icon fa fa-file-code-o"></i><span class="sub-menu-header">Forms</span><i id="fourth-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>  
                            <ul id="sub-menu-two" class="sub-menu">
                                <li>    <a href="#">Header</a>  </li>
                                <li>    <a href="#">Aside</a>   </li>
                                <li>    <a href="#">Footer</a>  </li>
                            </ul>
                        </li>
                    </ul>

在上面的代码中，我试图实现一个具有两个功能的下拉菜单。当点击一个菜单项时，

1. 与每个菜单项关联的图标需要旋转 90 度(才能正常工作)。
2. 需要显示与相应菜单项关联的子菜单项。 (不工作)

我试图在 javascript 代码中放置一条警告消息来检查是否有任何问题，但它正在工作。我想修复这个错误，我该如何修复它？

Answer 1

您的部分问题以 id sub-menu-one、sub-menu-two 等开头...您应该只使用这些 id 一次。您的外部列表的类 sub-menu-parent 的 id 等于子 ul id。从父项中删除 id 可使子菜单可见。

您的 HTML 中的一些 ID 似乎也有复制过去的错误，例如父 2 的子 ul 列表的 ID 为 sub-menu-one

https://jsfiddle.net/qp4g5wuw/1/