下拉菜單將響應單擊另一個內容

Question

我有這個下拉菜單解決方案。 http://jsfiddle.net/ftymhs8s/

我需要隱藏當我單擊另一行並顯示它的下拉菜單時顯示的一個下拉菜單。 我還需要在人們訪問網站時始終顯示第一行下拉菜單。

我希望我正確描述了我的問題，你能幫我嗎？

 // Dropdown Menu var dropdown = document.querySelectorAll('.dropdown'); var dropdownArray = Array.prototype.slice.call(dropdown, 0); dropdownArray.forEach(function(el) { var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow'); button.onclick = function(event) { if (!menu.hasClass('show')) { menu.classList.add('show'); menu.classList.remove('hide'); arrow.classList.add('open'); arrow.classList.remove('close'); event.preventDefault(); } else { menu.classList.remove('show'); menu.classList.add('hide'); arrow.classList.remove('open'); arrow.classList.add('close'); event.preventDefault(); } }; }) Element.prototype.hasClass = function(className) { return this.className && new RegExp("(^|\\\\s)" + className + "(\\\\s|$)").test(this.className); };

 ul { list-style: none } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: black; padding: 10px; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; padding: 10px 10px; } .dropdown .show { display: block; max-height: 9999px; margin-left: 50px; } .dropdown .hide { max-height: 0; }

 <div class="container"> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">First Menu</a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Second Menu</a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Third Menu </a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> </div>

Answer 1

一次只能打開其中一個的多個可折疊元素的行為是手風琴的行為。 總體思路是先關閉所有可折疊對象，然后再打開用戶選擇的可折疊對象。 以下演示展示了事件委托的行為。

順便說一句，我注意到你做了一個hasClass ... er Class。 這不是必需的，只需使用： node.classList.contains('class')

詳情在demo中評論

演示

 /* Added .main class to parent <ul> || By adding the eventListener to the || parent of multiple clickable nodes || and using e.target property to find || the exact node actually clicked, we || have just needed the <ul> to listen || rather than 3 separate <li> || This is part of Event Delagation */ var main = document.querySelector('.main'); main.addEventListener('click', accordion, false); function accordion(e) { /* Gather all .dropdown-menu to a NodeList || then covert it to an array */ var dropArray = Array.from(document.querySelectorAll('.dropdown-menu')); /* Gather all links in the .dropdown-menus to || a NodeList then convert it to an array */ var linxArray = Array.from(document.querySelectorAll('a + .dropdown-menu a')); /* if the clicked node (e.target) is NOT the || node listening for event (e.currentTarget || ul.main) then... */ if (e.target !== e.currentTarget) { // Assign e.target to var tgr var tgr = e.target; /* if tgr has data-toggle attribute... || Find tgr next sibling (.dropdown-menu) || Iterate through dropArray wth a || for...of loop || Remove .show and add .hide on || each .dropdown-menu in dropArray || Then add .show and remove .hide || on tgt || Finally stop the click event from || bubbling, thereby preventing anything || else from being triggered. */ if (tgr.hasAttribute('data-toggle')) { // Stop <a> from jumping e.preventDefault(); var tgt = tgr.nextElementSibling; for (let drop of dropArray) { drop.classList.remove('show'); drop.classList.add('hide'); } tgt.classList.add('show'); tgt.classList.remove('hide'); } else { return; } e.stopPropagation(); } }

 html, body, .contain { height: 100%; width: 100%; } .main, section, article { margin-bottom: 100vh; } ul { list-style: none } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: black; padding: 10px; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; padding: 10px 10px; } .dropdown .show { display: block; max-height: 9999px; margin-left: 50px; } .dropdown .hide { max-height: 0; }

 <div id='home' class="container"> <ul class='main'> <li class="dropdown"> <a href="#" data-toggle="dropdown">First Menu</a> <ul class="dropdown-menu"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Second Menu</a> <ul class="dropdown-menu"> <li><a href="#1">Section I</a></li> <li><a href="#2">Section II</a></li> <li><a href="#3">Section III</a></li> <li><a href="#4">Section IV</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Third Menu</a> <ul class="dropdown-menu"> <li><a href="https://example.com">Example</a></li> <li><a href="https://example.com">Example</a></li> <li><a href="https://example.com">Example</a></li> <li><a href="https://example.com">Example</a></li> </ul> </li> </ul> <article id='about'> <h2>About</h2> </article> <article id='services'> <h2>Services</h2> </article> <article id='contact'> <h2>Contact</h2> </article> <hr> <section id='1'> <h2>Section I</h2> </section> <section id='2'> <h2>Section II</h2> </section> <section id='3'> <h2>Section III</h2> </section> <section id='4'> <h2>Section IV</h2> </section> </div>