如何將菜單更改為切換菜單？

Question

我的菜單會在鼠標懸停時自動打開，並且在鼠標不再懸停時會關閉菜單，但這不是您想要的功能，實際上我想更改菜單代碼以切換菜單和菜單中的所有ul，我怎樣才能做到這一點 ？ 下面的代碼是我的菜單代碼，您可以查看它。

編碼：

 #ABT-Container { font-family: 'Roboto', sans-serif; background: transparent; width: 100%; float: right; } a { text-align: center; font-family: 'Roboto', sans-serif; color: #333; } #nav { float: right; font-family: 'Roboto', sans-serif; padding: 2px 6px 0; line-height: 100%; border-radius: 1em; background: white; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */ border: solid 1px white; } #nav li { font-family: 'Roboto', sans-serif; margin: 0 5px; padding: 0 0 8px; float: right; position: relative; list-style: none; } /* main level link */ #nav a { font-family: 'Roboto', sans-serif; color: #353535; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 0em; -moz-border-radius: 0em; text-shadow: 0 0px 0px rgba(0, 0, 0, .3); } /* sub levels link hover */ #nav ul li:hover a, #nav li:hover li a { font-family: 'Roboto', sans-serif; background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } /* level 2 list */ #nav ul { font-family: 'Roboto', sans-serif; background: #FFFFFF; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */ display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; right: 0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8); box-shadow: 0 1px 1px rgba(0, 0, 0, .8); } /* dropdown */ #nav li:hover>ul { font-family: 'Roboto', sans-serif; display: block; } #nav ul li { font-family: 'Roboto', sans-serif; float: none; margin: 0; padding: 0; } #nav ul a { font-family: 'Roboto', sans-serif; font-weight: normal; text-shadow: 0 1px 1px rgba(255, 255, 255, .9); } /* level 3+ list */ #nav ul ul { font-family: 'Roboto', sans-serif; right: 181px; top: -3px; } /* rounded corners for first and last child */ #nav ul li:first-child>a { -webkit-border-top-right-radius: 1px; -moz-border-radius-topleft: 1px; -webkit-border-top-left-radius: 1px; -moz-border-radius-topright: 1px; } #nav ul li:last-child>a { -webkit-border-bottom-right-radius: 1px; -moz-border-radius-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; -moz-border-radius-bottomright: 1px; } /* clearfix */ #nav:after { font-family: 'Roboto', sans-serif; content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #nav { font-family: 'Roboto', sans-serif; display: inline-block; } html[xmlns] #nav { font-family: 'Roboto', sans-serif; display: block; } * html #nav { height: 1%; } .menu_line { width: 25px; height: 2px; background-color: black; color: black; margin: 4px 0; } 

 <nav class="navbar"> <div id="ABT-Container"> <ul id="nav"> <li class="w3-animate-right"> <a href="#"> <p class="menu_line"></p> <p class="menu_line"></p> <p class="menu_line"></p> </a> <ul> <li><a href="#">About US</a> <ul> <li> </li> </ul> </li> <li><a href="#">Multi-Levels</a> <ul> <li><a href="#">Sales</a> <ul> <li><a href="#">Support</a></li> </ul> </li> <li><a href="#">Another Link</a></li> <li><a href="#">Department</a> </li> </ul> </li> </li> </ul> </ul> </ul> </div> </nav> 

Answer 1

您也可以在不使用jquery的情況下執行此操作，但是我個人會添加一些內容以指示某些內容具有子菜單，因為您現在必須嘗試找出答案。

 let hovering = false; function toggle(element) { const nodes = getChildNodes(element.parentElement); const parentNodes = getChildNodes(element.parentElement.parentElement); if(parentNodes.length > 1) { parentNodes.forEach(function(parentNode) { const parentChildNodes = getChildNodes(parentNode); if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1]) { parentChildNodes[1].style.display = 'none'; } }); } if(nodes[1].style.display === 'block') { nodes[1].style.display = 'none'; } else { nodes[1].style.display = 'block'; } } function getChildNodes(node) { let children = new Array(); for(const child in node.childNodes) { if(node.childNodes[child].nodeType == 1) { children.push(node.childNodes[child]); } } return children; } window.onload = function() { // For clicks inside the element document.getElementById('menuElement').onclick = function(e) { // Make sure the event doesn't bubble from your element if (e) { e.stopPropagation(); } else { window.event.cancelBubble = true; } // Place the code for this element here }; // For clicks elsewhere on the page document.onclick = function() { const uls = document.getElementById('nav').getElementsByTagName('ul'); for (i = 0; i < uls.length; i++) { uls[i].style.display = 'none'; } }; }; 

 #ABT-Container { font-family: 'Roboto', sans-serif; background: transparent; width:100%; float:right; } a { text-align: center; font-family: 'Roboto', sans-serif; color: #333; } #nav { float: right; font-family: 'Roboto', sans-serif; padding: 2px 6px 0; line-height: 100%; border-radius: 1em; background: white; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */ border: solid 1px white; } #nav li { font-family: 'Roboto', sans-serif; margin: 0 5px; padding: 0 0 8px; float: right; position: relative; list-style: none; } /* main level link */ #nav a { font-family: 'Roboto', sans-serif; color: #353535; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 0em; -moz-border-radius: 0em; text-shadow: 0 0px 0px rgba(0, 0, 0, .3); } /* level 2 list */ #nav ul { font-family: 'Roboto', sans-serif; background: #FFFFFF; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */ display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; right: 0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8); box-shadow: 0 1px 1px rgba(0, 0, 0, .8); } /* dropdown */ #nav ul li { font-family: 'Roboto', sans-serif; float: none; margin: 0; padding: 0; } #nav ul a { font-family: 'Roboto', sans-serif; font-weight: normal; text-shadow: 0 1px 1px rgba(255, 255, 255, .9); } /* level 3+ list */ #nav ul ul { font-family: 'Roboto', sans-serif; right: 181px; top: -3px; } /* rounded corners for first and last child */ #nav ul li:first-child > a { -webkit-border-top-right-radius: 1px; -moz-border-radius-topleft: 1px; -webkit-border-top-left-radius: 1px; -moz-border-radius-topright: 1px; } #nav ul li:last-child > a { -webkit-border-bottom-right-radius: 1px; -moz-border-radius-bottomleft: 1px; -webkit-border-bottom-left-radius: 1px; -moz-border-radius-bottomright: 1px; } /* clearfix */ #nav:after { font-family: 'Roboto', sans-serif; content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #nav { font-family: 'Roboto', sans-serif; display: inline-block; } html[xmlns] #nav { font-family: 'Roboto', sans-serif; display: block; } * html #nav { height: 1%; } .menu_line{ width: 25px; height: 2px; background-color: black; color: black; margin: 4px 0; } 

 <nav class="navbar"> <div id="ABT-Container"> <ul id="nav"> <li class="w3-animate-right" id="menuElement"> <a href="#" onclick="toggle(this)"> <p class="menu_line"></p> <p class="menu_line"></p> <p class="menu_line"></p> </a> <ul> <li> <a href="#" onclick="console.log('about us clicked')">About US</a> <ul> <li></li> </ul> </li> <li> <a href="#" onclick="toggle(this)">Multi-Levels</a> <ul> <li> <a href="#" onclick="toggle(this)">Sales</a> <ul> <li> <a href="#" onclick="console.log('support clicked')">Support</a> </li> </ul> </li> <li> <a href="#" onclick="console.log('another link clicked')">Another Link</a> </li> <li> <a href="#" onclick="console.log('department clicked')">Department</a> </li> </ul> </li> <li> <a href="#" onclick="toggle(this)">Multi-Levels2</a> <ul> <li> <a href="#" onclick="toggle(this)">Sales2</a> <ul> <li> <a href="#" onclick="console.log('support2 clicked')">Support2</a> </li> </ul> </li> <li> <a href="#" onclick="toggle(this)">Sales3</a> <ul> <li> <a href="#" onclick="console.log('support clicked3')">Support3</a> </li> </ul> </li> <li> <a href="#" onclick="console.log('another link2 clicked')">Another Link2</a> </li> <li> <a href="#" onclick="console.log('department clicked2')">Department2</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> 

編輯：現在也關閉了菜單上未單擊的位置。