打开另一个时如何关闭下拉菜单？

Question

I am new to javascript, I need help with my code.

I have two dropdowns that hold aa button and a container with links. How do I make one dropdown close while I open the other?

I have tried comparing the giving them different ids and comparing them but I am not sure I got that right.

 // achieve effect // event delegation on body let activeDropDown; document.body.addEventListener('click', dropDown); // event function for toggling class function dropDown(ex) { // if (activeDropDown.id && activeDropDown.id !== ex.target.id) { // activeDropDown.nextElementSibling.classList.toggle('shower'); // } if(ex.target.parentElement.classList.contains('am')) { let val; activeDropDown = ex.target.parentElement.id; activeDropDown.element = ex.target.parentElement; val = activeDropDown; ex.target.nextElementSibling.classList.toggle('shower'); console.log(val); } } // close the dropdown if the user click outside the button window.addEventListener('click', closeDropDown); // declaring the function function closeDropDown(ex2) { if (!ex2.target.matches('.arch-button')) { // getting the dropdowncontent let postDrop = document.querySelectorAll('.monthly-post'); // var i; for (let i = 0; i < postDrop.length; i++) { let checkDropDown = postDrop[i]; if (checkDropDown.classList.contains('shower')) { checkDropDown.classList.remove('shower'); } } } }; 

  .am:not(:last-child) { border-bottom: 0.5px solid #C8C8C8; } .am:not(:first-child) { margin-top: 12px; } .monthly-post { position: relative; left: 17px; overflow: hidden; height: 0; } .shower{ overflow: visible !important; max-height: 100% !important; height: 100% !important; transition: all ease-in-out 500ms; -webkit-transition: all ease-in-out 500ms; -moz-transition: all ease-in-out 500ms; -ms-transition: all ease-in-out 500ms; -o-transition: all ease-in-out 500ms; } .post-linker { display: block; color: #0069E6; } .post-linker:hover, .post-linker:active{ color: #21293C; } 

  <div class="am" id="am-march"> <button class="arch-button">March 2019</button> <div class="monthly-post"> <a href="" class="post-linker">TEF Application 2019</a> <a href="" class="post-linker">Big Brother 2019</a> <a href="" class="post-linker">Hotelo new Application for guest</a> <a href="" class="post-linker">Air peace easter promo</a> </div> </div> <div class="am" id="am-april"> <button class="arch-button">April 2019</button> <div class="monthly-post"> <a href="" class="post-linker">ahahahah</a> <a href="" class="post-linker">ahahahah</a> <a href="" class="post-linker">ahahaha</a> <a href="" class="post-linker">ahahahahha</a> </div> </div> 

I want the dropdrop to close while I open another dropdown.

Answer 1

您可以使用event.path或event.composedPath来检查元素是否不同，并关闭其他下拉列表。

Answer 2

Consume closeDropDown(); from dropDown() and remove click handlers.

  let activeDropDown; document.body.addEventListener('click', dropDown); function dropDown(ex) { closeDropDown(); if (ex.target.parentElement.classList.contains('am')) { let val; activeDropDown = ex.target.parentElement.id; activeDropDown.element = ex.target.parentElement; val = activeDropDown; ex.target.nextElementSibling.classList.toggle('shower'); console.log(val); } } function closeDropDown() { let postDrop = document.querySelectorAll('.monthly-post'); for (let i = 0; i < postDrop.length; i++) { let checkDropDown = postDrop[i]; if (checkDropDown.classList.contains('shower')) { checkDropDown.classList.remove('shower'); } } }; 

  .am:not(:last-child) { border-bottom: 0.5px solid #C8C8C8; } .am:not(:first-child) { margin-top: 12px; } .monthly-post { position: relative; left: 17px; overflow: hidden; height: 0; } .shower { overflow: visible !important; max-height: 100% !important; height: 100% !important; transition: all ease-in-out 500ms; -webkit-transition: all ease-in-out 500ms; -moz-transition: all ease-in-out 500ms; -ms-transition: all ease-in-out 500ms; -o-transition: all ease-in-out 500ms; } .post-linker { display: block; color: #0069E6; } .post-linker:hover, .post-linker:active { color: #21293C; } 

 <div class="am" id="am-march"> <button class="arch-button">March 2019</button> <div class="monthly-post"> <a href="" class="post-linker">TEF Application 2019</a> <a href="" class="post-linker">Big Brother 2019</a> <a href="" class="post-linker">Hotelo new Application for guest</a> <a href="" class="post-linker">Air peace easter promo</a> </div> </div> <div class="am" id="am-april"> <button class="arch-button">April 2019</button> <div class="monthly-post"> <a href="" class="post-linker">ahahahah</a> <a href="" class="post-linker">ahahahah</a> <a href="" class="post-linker">ahahaha</a> <a href="" class="post-linker">ahahahahha</a> </div> </div>