如何在此下拉菜單中顯示子菜單項
[英]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>
在上面的代碼中，我正在嘗試實現具有兩個功能的下拉菜單。單擊菜單項時，
- 與每個菜單項關聯的圖標需要旋轉90度（它可以正常工作）。
- 需要顯示與相應菜單項關聯的子菜單項。 （不起作用）
我試圖將警報消息放在javascript代碼中，以檢查是否有任何問題，但它正在運行。我想修復此錯誤，如何解決此問題？
2 個解決方案
解決方案1
0 已采納 2016-09-21 04:18:04
您的問題的一部分從ID sub-menu-one ， sub-menu-two等等開始……您應該只使用一次這些ID。 您的外部列表具有sub-menu-parent ，其id等於子ul id。 從父級中刪除ID可使子菜單可見。
還似乎您的HTML中的某些ID可能有復制過去的錯誤，例如，父級2的子ul列表的ID為sub-menu-one
解決方案2
0 2016-09-21 04:21:02
我檢查了您的代碼，發現您剛剛創建了兩個具有相同名稱的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 子菜單一更改為菜單一 ，依此類推...
之后，由於相同的id，我更改了一些JavaScript代碼：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
網站中的可拖動下拉菜單（通過觸摸幻燈片顯示菜單元素）
[英]Draggable drop-down menu in a website (display menu elements by touchslide)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.