[英]JavaScript How to close one drop down when another one clicked to open. No Jquery
I have a lot of <ul>
<li>
s and every <ul>
has it's own drop down. 我有很多<ul>
<li>
,每个<ul>
都有它自己的下拉菜单。 I want to have only one drop down open at a time. 我想一次只打开一个下拉列表。 If I click to open one, then the one which is already opened needs to be closed. 如果单击以打开一个,则需要关闭已打开的一个。
function toggleClass(element, className) { if (!element || !className) { return; } var classString = element.className, nameIndex = classString.indexOf(className); if (nameIndex == -1) { classString += ' ' + className; } else { classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length); } element.className = classString; } function dropDown(el) { toggleClass(el.nextElementSibling, 'overlayOpen'); }
ul { width: 200px; } li { margin: 0; font-size: 20px; line-height: 50px; width: 100%; cursor: pointer; background-color: red; overflow: hidden; } .overlayOpen { opacity: 1 !important; height: 50px !important; width: 100% !important; } .overlay { width: 100%; z-index: 1000; background-color: green; overflow: hidden; max-width: 800px; opacity: 0; height: 0; width: 0; -webkit-transition: width 0.2s, height 0.2s, opacity 0.2s ease; -moz-transition: width 0.2s, height 0.2s, opacity 0.2s ease; -o-transition: width 0.2s, height 0.2s, opacity 0.2s ease; -ms-transition: width 0.2s, height 0.2s, opacity 0.2s ease; transition: width 0.2s, height 0.2s, opacity 0.2s ease; }
<ul> <li id="1" onclick='dropDown(this)'>example</li> <li id="overlay_1" class='overlay'>Hidden stuff</li> </ul> <ul> <li id="2" onclick='dropDown(this)'>example</li> <li id="overlay_2" class='overlay'>Hidden stuff</li> </ul>
You could just remove the overlayOpen
class from all elements prior to opening the clicked element: 您可以在打开clicked元素之前从所有元素中删除overlayOpen
类:
function dropDown(el) {
Array.from(document.querySelectorAll('.overlayOpen'))
.filter(elem => elem !== el.nextElementSibling)
.forEach(element => element.classList.remove('overlayOpen'));
toggleClass(el.nextElementSibling, 'overlayOpen');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.