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>
在上面的代码中我试图实现一个包含两个功能的下拉菜单。点击一个菜单项，
我试图在javascript代码中放置一条警告消息来检查是否有任何问题，但它正在工作。我想修复此错误，我该如何解决这个问题？
答案 0 :(得分：0)
您的部分问题以身份zeroes = repeat 0
，sub-menu-one等开头......您应该只使用这些ID一次。您的外部列表包含类sub-menu-two，其id等于子ul标识。从父项中删除id允许子菜单变为可见。
似乎HTML中的某些ID可能有一个过去错误的副本，例如，父2的子ul列表的ID为sub-menu-parent
答案 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