如何在JavaScript中使用EventListener下拉或隱藏和顯示子菜單？
[英]How to dropdown or hide and show submenu with EventListener in javascript?
問題描述
基本上，我的subtopics元素是隱藏的，我希望在單擊Topics元素時顯示subtopics元素，而在單擊Topics時再次隱藏subtopics元素。 就像隱藏和顯示元素
我嘗試在運行代碼時將classList與addEventListener一起使用，它顯示存在對我不起作用的錯誤。
我還發現大多數人都在使用jquery，因為它非常容易，但是對我來說，我想首先使用javascript進行練習。
我仍然期待着適合我的情況。 如果有人知道如何使用此功能進行編碼，請給我一些解決方案，非常感謝。
這是我的代碼，請看一看。
var togglemenu = (function () { var togSubtopics = document.getElementById("subtopics"); togSubtopics.addEventListener("click", function () { togSubtopics.classList.toggle("show"); }); return { togglemenu: togglemenu() }; })();
body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #mainmenu { position: relative; } #mainmenu ul { margin: 0; padding: 0; } #mainmenu li { display: inline-block; } #mainmenu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*subtopics*/ #subtopics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } .show { display: block; } #subtopics ul { margin: 0; padding: 0; } #subtopics li { display: block; } #subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #mainmenu li:hover { text-decoration: underline; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index2.css" /> </head> <body> <div id="mainmenu"> <ul> <li><a href="">Logo</a></li> <li><a href="">Home</a></li> <li><a href="">Topics</a> <div id="subtopics"> <div id="column1" class="columns"> <ul> <li><a href="">example1</a></li> <li><a href="">example2</a></li> <li><a href="">example3</a></li> </ul> </div> </div> </li> </ul> </div> <script src="index2.js"></script> </body> </html>
1 個解決方案
解決方案1
2 2018-06-14 03:35:29
一種可能的方法是：onclick-切換該元素的類（添加或刪除show ）
然后在CSS中添加display: block規則display: block .submenu下的.show
UPD在顯示任何項目的子項目之前-請確保您已隱藏其他打開的子菜單
(function () { var menuElems = document.querySelectorAll("#mainmenu ul > li") menuElems.forEach(function(elem){ elem.addEventListener("click", function(){ //hide all open submenus menuElems.forEach(function(e){ e.classList.remove("show"); }) //show the one that is clicked right now elem.classList.add("show"); }, false) }); })();
body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-decoration-line: none; color: black; } /*main-menu*/ #mainmenu { position: relative; } #mainmenu ul { margin: 0; padding: 0; } #mainmenu li { display: inline-block; } #mainmenu a { display: block; width: 100px; padding: 10px; border: 1px solid; text-align: center; } /*subtopics*/ .subtopics { position: absolute; display: none; margin-top: 10px; width: 100%; left: 0; } .show .subtopics{ display: block; } .subtopics ul { margin: 0; padding: 0; } .subtopics li { display: block; } .subTopics a { text-align: left; } /*columns*/ #column1, #column2, #column3 { position: relative; float: left; left: 125px; margin: 0px 5px 0px 0px; } /*hover underline*/ #mainmenu li:hover { text-decoration: underline; }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index2.css" /> </head> <body> <div id="mainmenu"> <ul> <li><a href="#">Logo</a></li> <li><a href="#">Home</a> <div class="subtopics"> <div id="column1" class="columns"> <ul> <li><a href="">Home_example1</a></li> <li><a href="">Home_example2</a></li> <li><a href="">Home_example3</a></li> </ul> </div> </div> </li> <li><a href="#">Topics</a> <div class="subtopics"> <div id="column1" class="columns"> <ul> <li><a href="">Topic_example1</a></li> <li><a href="">Topic_example2</a></li> <li><a href="">Topic_example3</a></li> </ul> </div> </div> </li> </ul> </div> <script src="index2.js"></script> </body> </html>
去除UPD代碼show從類menuElems的onclick到subtopic
關於冒泡和捕獲var subtopicElems = document.querySelectorAll(".subtopics ul > li a") subtopicElems.forEach(function(item){ item.addEventListener("click", function(event){ menuElems.forEach(function(menuElem){ menuElem.classList.remove("show") }) event.stopPropagation(); //gotta stop bubbling }, false) })
如何使用EventListener切換子菜單只有javascript沒有jquery？
[英]How to toggle submenu with EventListener only javascript without jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.