如何在此下拉菜单中显示子菜单项
[英]how to display the sub-menu items in this 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>
in the above code i'm trying to implement a drop-down menu with two functionalities.when click on a menu item, 
在上面的代码中，我正在尝试实现具有两个功能的下拉菜单。单击菜单项时，
- icon associated with each menu item need to be rotate 90deg(it's working properly). 与每个菜单项关联的图标需要旋转90度（它可以正常工作）。
- sub menu items associated with corresponding menu item need to be displayed. 需要显示与相应菜单项关联的子菜单项。 (not working) （不起作用）
i tried to put an alert message inside the javascript code to check is there any problem,but it's working.i want to fix this error ,how can i fix this? 我试图将警报消息放在javascript代码中，以检查是否有任何问题，但它正在运行。我想修复此错误，如何解决此问题？
2 个解决方案
解决方案1
0 已采纳 2016-09-21 04:18:04
Part of your problem starts with the id sub-menu-one , sub-menu-two , etc... You should only use these id's once. 您的问题的一部分从ID sub-menu-one ， sub-menu-two等等开始……您应该只使用一次这些ID。 You have the outer list with class sub-menu-parent with an id equal to the child ul id. 您的外部列表具有sub-menu-parent ，其id等于子ul id。 Removing the id from the parent allows the submenu to become visible. 从父级中删除ID可使子菜单可见。
It also appears that some of your id's in HTML may have a copy past error, for example the child ul list of parent 2 has a id of sub-menu-one 还似乎您的HTML中的某些ID可能有复制过去的错误，例如，父级2的子ul列表的ID为sub-menu-one
https://jsfiddle.net/qp4g5wuw/1/ https://jsfiddle.net/qp4g5wuw/1/
解决方案2
0 2016-09-21 04:21:02
I have checked your code and I noticed that you have just create two id with the same name. 我检查了您的代码，发现您刚刚创建了两个具有相同名称的ID 。 Which cause this problem. 哪个导致这个问题。 I have changed your some code and it is working fine. 我已经更改了您的一些代码，并且工作正常。 check it out 看看这个
First of all I changed you id of following code: 首先，我更改了以下代码的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>
Notice I changed your id sub-menu-one to menu-one and so on... 请注意，我将您的id 子菜单一更改为菜单一 ，依此类推...
After that I changed some of your javascript code because of same id :P 之后，由于相同的id，我更改了一些JavaScript代码：P
so your full code is like this, 所以您的完整代码是这样的，
JavaScript 的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 Form 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>
Hope you understand it. 希望你能理解。 I am in hurry :P 我很着急：P
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
下拉菜单中的彩色字体 - Colored font in sub-menu of a drop-down
Bootstrap - 如何在子菜单打开时保持打开下拉菜单 - Bootstrap - How to keep drop-down menu open when sub-menu is open
如何为100个菜单项创建一个下拉菜单？ - How to create a drop-down menu for 100 menu items?
如何按字母顺序对下拉菜单项排序？ - How can I sort drop-down menu items alphabetically?
网站中的可拖动下拉菜单（通过触摸幻灯片显示菜单元素） - Draggable drop-down menu in a website (display menu elements by touchslide)
如何将按钮变成下拉菜单？ - How to turn a button into a drop-down menu?
如何做垂直下拉菜单？ - How to do a vertical drop-down menu?
如何将下拉菜单更改为下拉菜单 - How to change drop-down menu to drop-up menu
下拉菜单JS - drop-down menu JS
使用jQuery下拉菜单 - Drop-Down Menu with jQuery
相关标签