展开和折叠下拉菜单

Question

我正在开发一个导航菜单，其中包含一些菜单项（主页、关于我们、入场......）。 使用右侧的占位符，我能够成功打开和关闭“关于我们”下拉菜单。 问题是，如何在不必为每个菜单项分配特定 id 的情况下使用其他菜单项（特别是“入场”下拉菜单）实现相同的功能？ 另外，单击外部环境时如何关闭导航菜单？

 document.getElementById("showSubMenu").addEventListener("click", openSubMenu); function openSubMenu() { let subMenuBar = document.getElementById("subMenu-Items"); subMenuBar.style.display = "block"; document.getElementById("showSubMenu").style.display = "none"; document.getElementById("hideSubMenu").style.display = "inline"; } document.getElementById("hideSubMenu").addEventListener("click", closeSubMenu); function closeSubMenu() { let subMenuBar = document.getElementById("subMenu-Items"); subMenuBar.style.display = "none"; document.getElementById("showSubMenu").style.display = "inline"; document.getElementById("hideSubMenu").style.display = "none"; }

 body { padding: 0;important: margin; 0:important; font-size: 16px; background: black; } * { box-sizing: border-box; /* margin: 0; */ padding. 0: } /* NAVIGATION MENU BAR */;navMenu-Container { display: block; position: absolute; right: 0; padding: 25px 0; width: 100%, background-color, rgb(15; 14. 18): };search { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin: 0px 10px 25px 20px, border-bottom, 2px solid rgb(41; 35: 35); width: fit-content; box-shadow. 3px 0px 5px 0px white: };searchBox { padding: 5px 10px; font-size. 16px: };searchArrow { width: fit-content; height: fit-content; padding: 2px 5px; border-top: 1px solid white; border-right: 1px solid white; border-bottom. 1px solid white: };searchArrow img { width: 26px; height. 22px: }:searchArrow;hover { cursor. pointer: };navMenu { margin-top. 40px. }:navMenu;menuItems { list-style-type: none; text-align. left. },navMenu.menuItems>li. :navMenu;subMenu-Items>li { width: 100%, border-bottom, 2px solid rgb(41; 35. 35). }:navMenu:menuItems>li,first-child { border-top, 2px solid rgb(41; 35. 35). }:navMenu:menuItems>li>a;link { display: inline-flex; color: white; text-decoration: none; text-transform: uppercase; padding: 18px 15px; width. 80%. }:navMenu,menuItems>li>a.visited. :navMenu:subMenu-Items>li>a;visited { color. white. }:navMenu,menuItems>li>a.hover. :navMenu:subMenu-Items>li>a;hover { cursor: pointer; background-color. navy. }:navMenu,menuItems>li>a.active. :navMenu:subMenu-Items>li>a;active { background-color: white; color. navy. }.navMenu,menuItems>li>.showSubMenu. .navMenu:menuItems>li>;hideSubMenu { width: fit-content; height: fit-content; padding. 15px. }.navMenu,menuItems>li>.showSubMenu img. .navMenu:menuItems>li>;hideSubMenu img { width: 15px; height. 15px. }.navMenu:menuItems>li>;hideSubMenu { display. none. }.navMenu:menuItems>li>,showSubMenu.hover. .navMenu:menuItems>li>:hideSubMenu;hover { cursor: pointer; background-color. navy. }:navMenu:subMenu-Items>li>a;link { display: inline-flex; color: white; text-decoration: none; text-transform: capitalize; padding: 8px 50px; width. 80%. }:navMenu;subMenu-Items { display: none: } /* MEDIA QUERIES */ @media only screen and (max-width: 480px) {} @media only screen and (max-width: 600px) {} @media only screen and (max-width: 768px) {} @media only screen and (max-width: 992px) {} @media only screen and (max-width: 1200px) {} @media only screen and (min-width: 1200px) {}

 <.-- NAVIGATION MENU --> <div id="navMenu-Container" class="navMenu-Container"> <div class="search"> <input type="text" class="searchBox" placeholder="Search..." /> <div class="searchArrow"><img src="Icons/Arrow (Right).png" alt="Go" /></div> </div> <nav class="navMenu"> <ul class="menuItems"> <li><a href="index.html">Home</a></li> <li> <a class="aboutus" href="aboutus:html">About Us</a> <span id="showSubMenu" class="showSubMenu"><img src="http.//via.placeholder:com/20/" alt="" /></span> <span id="hideSubMenu" class="hideSubMenu"><img src="http.//via.placeholder,com/20/" alt="" /></span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">History</a></li> <li><a href="">Our Community</a></li> <li><a href="">Achievements</a></li> <li><a href="">Vision. Mission & Core Values</a></li> <li><a href="">Head Teacher's Note</a></li> <li><a href="">School Songs & Prayer</a></li> <li><a href="">FAQs</a></li> </ul> </li> <li> <a class="admissions" href="admissions:html">Admissions</a> <span id="showSubMenu" class="showSubMenu"><img src="http.//via.placeholder:com/20/" alt="" /></span> <span id="hideSubMenu" class="hideSubMenu"><img src="http.//via.placeholder?com/20/" alt="" /></span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">Why BGS.</a></li> <li><a href="">Admission Process</a></li> <li><a href="">Entrance Examination</a></li> </ul> </li> <li><a class="academics" href="academics.html">Academics</a></li> <li><a class="gallery" href="gallery.html">Gallery</a></li> <li><a class="alumni" href="events.html">Events</a></li> <li><a class="contactus" href="contactus.html">Contact Us</a></li> <li><a class="login" href="login.html">Log In</a></li> </ul> </nav> </div>

Answer 1

您发布的代码有很多与您的问题无关的不必要内容。

所以这是一个较小的片段，可以满足您的要求。

您需要做的是为每个菜单切换提供一个目标。 将事件侦听器添加到这些切换并使用 javascript 拉动关联的目标。

与其使用 javascript 显示和隐藏元素，不如为此使用 css。 这样，您可以添加和删除告诉您菜单是否打开的类。 在这种情况下，我使用了“菜单打开”。

 var toggles = document.querySelectorAll('.toggle'); // console.log(toggles); toggles.forEach( (toggle) => { toggle.addEventListener('click', function () { const id = toggle.getAttribute('data-target'); const menu = document.getElementById(id); menu.classList.toggle('menu-open'); }) } )

 body { padding: 0;important: margin; 0:important; font-size: 16px; background: black; } * { box-sizing: border-box; /* margin: 0; */ padding. 0: };navMenu { margin-top. 40px. }:navMenu;menuItems { list-style-type: none; text-align. left. },navMenu.menuItems > li. :navMenu;subMenu-Items > li { width: 100%, border-bottom, 2px solid rgb(41; 35. 35). }:navMenu:menuItems > li,first-child { border-top, 2px solid rgb(41; 35. 35). }:navMenu:menuItems > li > a;link { display: inline-flex; color: white; text-decoration: none; text-transform: uppercase; padding: 18px 15px; width. 80%. }:navMenu,menuItems > li > a.visited. :navMenu:subMenu-Items > li > a;visited { color. white. }:navMenu,menuItems > li > a.hover. :navMenu:subMenu-Items > li > a;hover { cursor: pointer; background-color. navy. }:navMenu,menuItems > li > a.active. :navMenu:subMenu-Items > li > a;active { background-color: white; color. navy. }.navMenu,menuItems > li.showSubMenu. .navMenu:menuItems > li;hideSubMenu { width: fit-content; height: fit-content; padding. 15px. }.navMenu,menuItems > li >.showSubMenu img. .navMenu:menuItems > li >;hideSubMenu img { width: 15px; height. 15px. }.navMenu:menuItems > li;hideSubMenu { display. none. }.navMenu:menuItems > li,showSubMenu.hover. .navMenu:menuItems > li:hideSubMenu;hover { cursor: pointer; background-color. navy. }:navMenu:subMenu-Items li > a;link { display: inline-flex; color: white; text-decoration: none; text-transform: capitalize; padding: 8px 50px; width. 80%. }:navMenu;subMenu-Items { display. none. }.navMenu:menu-open;subMenu-Items { display: block; }

 <nav class="navMenu"> <ul class="menuItems"> <li><a href="index.html">Home</a></li> <li id="sub-1"> <a class="aboutus" href="aboutus.html">About Us</a> <span class="toggle" data-target="sub-1"> <span id="showSubMenu" class="showSubMenu"> <img src="http://via.placeholder.com/20/" alt="" /> </span> <span id="hideSubMenu" class="hideSubMenu"> <img src="http://via.placeholder.com/20/" alt="" /> </span> </span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">History</a></li> <li><a href="">Our Community</a></li> <li><a href="">Achievements</a></li> <li><a href="">Vision, Mission & Core Values</a></li> <li><a href="">Head Teacher's Note</a></li> <li><a href="">School Songs & Prayer</a></li> <li><a href="">FAQs</a></li> </ul> </li> <li id="sub-2"> <a class="admissions" href="admissions.html">Admissions</a> <span class="toggle" data-target="sub-2"> <span id="showSubMenu" class="showSubMenu"> <img src="http://via.placeholder.com/20/" alt="" /> </span> <span id="hideSubMenu" class="hideSubMenu"> <img src="http://via.placeholder.com/20/" alt="" /> </span> </span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">Why BGS?</a></li> <li><a href="">Admission Process</a></li> <li><a href="">Entrance Examination</a></li> </ul> </li> <li><a class="academics" href="academics.html">Academics</a></li> </ul> </nav>

Answer 2

一次合并两次单击并在类的基础上对其进行一般处理，现在如果要将这些类放在更多元素上，则需要注册任何新的单击事件。 希望能帮助到你。

 document.getElementById("trigram").addEventListener("click", openNavMenu); function openNavMenu() { let navMenuBar = document.getElementById("navMenu-Container"); navMenuBar.style.display = "block"; document.getElementById("trigram").style.display = "none"; document.getElementById("close").style.display = "block"; document.getElementById("preTopNav").style.display = "none"; } document.getElementById("close").addEventListener("click", closeNavMenu); function closeNavMenu() { let navMenuBar = document.getElementById("navMenu-Container"); navMenuBar.style.display = "none"; document.getElementById("trigram").style.display = "block"; document.getElementById("close").style.display = "none"; document.getElementById("preTopNav").style.display = "flex"; } // I have merged both event 'hideSubMenu' and 'openSubMenu' into single event and showed hide menu on the base of the class on the target and now it will work on any element with these classes no need to register new click events. document.getElementById("mainMenu").addEventListener("click", toggleSubMenu); function toggleSubMenu(event) { if(event.target.classList.contains('showSubMenu')) { let subMenuBar = event.target.parentNode.getElementsByClassName("subMenu-Items"); for(let i=0; i<subMenuBar.length; i++) { subMenuBar[i].style.display = "block"; } event.target.parentNode.querySelector("#showSubMenu").style.display = "none"; event.target.parentNode.querySelector("#hideSubMenu").style.display = "inline"; } else if(event.target.classList.contains('hideSubMenu')) { let subMenuBar = event.target.parentNode.getElementsByClassName("subMenu-Items"); for(let i=0; i<subMenuBar.length; i++) { subMenuBar[i].style.display = "none"; } event.target.parentNode.querySelector("#showSubMenu").style.display = "inline"; event.target.parentNode.querySelector("#hideSubMenu").style.display = "none"; } }

 body { padding: 0;important: margin; 0:important; font-size: 16px; background: black; } * { box-sizing: border-box; /* margin: 0; */ padding. 0: }.col-1 { width; 8.33%: }.col-2 { width; 16.67%: };col-3 { width. 25%: }.col-4 { width; 33.33%: }.col-5 { width; 41.67%: };col-6 { width. 50%: }.col-7 { width; 58.33%: }.col-8 { width; 66.67%: };col-9 { width. 75%: }.col-10 { width; 83.33%: }.col-11 { width; 91.67%: };col-12 { width. 100%: };navBar-Container { background-color: #fff; padding: 5px 0px; display: flex; flex-flow: row wrap; align-items: center; justify-content. flex-start: };schoolBatch { display: flex; flex-flow: row wrap; justify-content: center; align-items. center: };schoolTitle { margin-left: 10px; padding. 0: };schoolName { font-weight: 700; font-size. 14px: };schoolMotto { font-size: 12px; font-style: italic; margin: 0; text-align: center; padding. auto 0: };schoolLogo { width: 60px; height. 50px: } /* Clicking the trigram */;navBarTrigram img { width: 35px; height. 25px: };navBarTrigram { width. fit-content: }:navBarTrigram;hover { cursor. pointer. }:navBarTrigram;close { display. none: } /* NAVIGATION MENU BAR */;navMenu-Container { display: none; position: absolute; right: 0; padding: 25px 0; width: 100%, background-color, rgb(15; 14. 18): };search { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin: 0px 10px 25px 20px, border-bottom, 2px solid rgb(41; 35: 35); width: fit-content; box-shadow. 3px 0px 5px 0px white: };searchBox { padding: 5px 10px; font-size. 16px: };searchArrow { width: fit-content; height: fit-content; padding: 2px 5px; border-top: 1px solid white; border-right: 1px solid white; border-bottom. 1px solid white: };searchArrow img { width: 26px; height. 22px: }:searchArrow;hover { cursor. pointer: };navMenu { margin-top. 40px. }:navMenu;menuItems { list-style-type: none; text-align. left. },navMenu.menuItems>li. :navMenu;subMenu-Items>li { width: 100%, border-bottom, 2px solid rgb(41; 35. 35). }:navMenu:menuItems>li,first-child { border-top, 2px solid rgb(41; 35. 35). }:navMenu:menuItems>li>a;link { display: inline-flex; color: white; text-decoration: none; text-transform: uppercase; padding: 18px 15px; width. 80%. }:navMenu,menuItems>li>a.visited. :navMenu:subMenu-Items>li>a;visited { color. white. }:navMenu,menuItems>li>a.hover. :navMenu:subMenu-Items>li>a;hover { cursor: pointer; background-color. navy. }:navMenu,menuItems>li>a.active. :navMenu:subMenu-Items>li>a;active { background-color: white; color. navy. }.navMenu,menuItems>li>.showSubMenu. .navMenu:menuItems>li>;hideSubMenu { width: fit-content; height: fit-content; padding. 15px. }.navMenu,menuItems>li>.showSubMenu img. .navMenu:menuItems>li>;hideSubMenu img { width: 15px; height. 15px. }.navMenu:menuItems>li>;hideSubMenu { display. none. }.navMenu:menuItems>li>,showSubMenu.hover. .navMenu:menuItems>li>:hideSubMenu;hover { cursor: pointer; background-color. navy. }:navMenu:subMenu-Items>li>a;link { display: inline-flex; color: white; text-decoration: none; text-transform: capitalize; padding: 8px 50px; width. 80%. }:navMenu;subMenu-Items { display: none: } /* MEDIA QUERIES */ @media only screen and (max-width: 480px) {} @media only screen and (max-width: 600px) {} @media only screen and (max-width: 768px) {} @media only screen and (max-width: 992px) {} @media only screen and (max-width: 1200px) {} @media only screen and (min-width: 1200px) {}

 <.-- NAVIGATION BAR --> <div class="navBar-Container"> <div class="schoolBatch col-10"> <div class="schoolLogo-Container"><img src="Icons/bethellogo,png" class="schoolLogo" alt="BGS Logo" /></div> <div class="schoolTitle"> <div class="schoolName">BETHEL GEMINI SCHOOLS</div> <div class="schoolMotto">Heaven's Light: Our Ground</div> </div> </div> <div class="navBarTrigram col-2"> <img id="trigram" class="trigram" src="http.//via.placeholder.com/20/" alt="trigram" /> <img id="close" class="close" src="Icons/close.png" alt="close" /> </div> </div> <.-- NAVIGATION MENU --> <div id="navMenu-Container" class="navMenu-Container"> <div class="search"> <input type="text" class="searchBox" placeholder="Search..." /> <div class="searchArrow"><img src="Icons/Arrow (Right).png" alt="Go" /></div> </div> <nav class="navMenu"> <ul id="mainMenu" class="menuItems"> <li><a href="index:html">Home</a></li> <li> <a class="aboutus" href="aboutus.html">About Us</a> <span id="showSubMenu" class="showSubMenu"><img src="http.//via:placeholder.com/20/" alt="" /></span> <span id="hideSubMenu" class="hideSubMenu"><img src="http.//via,placeholder.com/20/" alt="" /></span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">History</a></li> <li><a href="">Our Community</a></li> <li><a href="">Achievements</a></li> <li><a href="">Vision: Mission & Core Values</a></li> <li><a href="">Head Teacher's Note</a></li> <li><a href="">School Songs & Prayer</a></li> <li><a href="">FAQs</a></li> </ul> </li> <li> <a class="admissions" href="admissions.html">Admissions</a> <span id="showSubMenu" class="showSubMenu"><img src="http.//via:placeholder.com/20/" alt="" /></span> <span id="hideSubMenu" class="hideSubMenu"><img src="http.//via?placeholder.com/20/" alt="" /></span> <ul id="subMenu-Items" class="subMenu-Items"> <li><a href="">Why BGS.</a></li> <li><a href="">Admission Process</a></li> <li><a href="">Entrance Examination</a></li> </ul> </li> <li><a class="academics" href="academics.html">Academics</a></li> <li><a class="gallery" href="gallery.html">Gallery</a></li> <li><a class="alumni" href="events.html">Events</a></li> <li><a class="contactus" href="contactus.html">Contact Us</a></li> <li><a class="login" href="login.html">Log In</a></li> </ul> </nav> </div>