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

时间：2016-09-21 03:35:11

标签： javascript html css drop-down-menu 

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. 需要显示与相应菜单项相关联的子菜单项。 （不工作）

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

2 个答案:

答案 0 :(得分：0)

您的部分问题以身份zeroes = repeat 0 ，sub-menu-one等开头......您应该只使用这些ID一次。您的外部列表包含类sub-menu-two，其id等于子ul标识。从父项中删除id允许子菜单变为可见。

似乎HTML中的某些ID可能有一个过去错误的副本，例如，父2的子ul列表的ID为sub-menu-parent

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

答案 1 :(得分：0)

我检查了您的代码，我注意到您刚刚创建了两个名称相同的 id 。这导致了这个问题。 我已经改变了你的一些代码，它工作正常。检查出来

首先，我改变了以下代码的ID：

    <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="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="menu-two" 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="menu-three" 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="menu-four" class="sub-menu">
                                    <li>    <a href="#">Header</a>  </li>
                                    <li>    <a href="#">Aside</a>   </li>
                                    <li>    <a href="#">Footer</a>  </li>


 </ul>
                        </li>

注意我已将您的ID 子菜单 - 更改为 menu-one ，依此类推......

之后我更改了一些你的javascript代码，因为ID相同：P

所以你的完整代码是这样的，

<强>的JavaScript 

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= "block";
            document.getElementById("menu-one").style.display= "none";

        }
        else{
        document.getElementById("sub-menu-one").style.display = "block";
        document.getElementById("menu-one").style.display= "block";
        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= "";
              document.getElementById("menu-two").style.display= "none";
        }
        else{
        document.getElementById("sub-menu-two").style.display = "block";
        document.getElementById("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= "";
              document.getElementById("menu-three").style.display= "none";
         }
        else{
        document.getElementById("sub-menu-three").style.display = "block";
        document.getElementById("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= "";
              document.getElementById("menu-four").style.display= "none";
         }
        else{
        document.getElementById("sub-menu-four").style.display = "block";
        document.getElementById("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 = "";
    }
}

HTML表单 

<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="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="menu-two" 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="menu-three" 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="menu-four" class="sub-menu">
                                <li>    <a href="#">Header</a>  </li>
                                <li>    <a href="#">Aside</a>   </li>
                                <li>    <a href="#">Footer</a>  </li>
                            </ul>
                        </li>
                    </ul>

希望你能理解。我很着急：P

相关问题
最新问题