Close Dropdown when other Dropdown is toggled active
Question
i am trying to close let´s say Dropdown A automatically, when Dropdown B gets classList.toggle("active) (in this case i toggle the ClassList with a Click)
I can open ( classList.toggle("active) ) and close ( classList.toggle("inactive) ) it manually, but i want to close it automatically.
Right now i got this:
function dropdown() {
let employerBranding = document.querySelector(".employer-branding");
let marketing = document.querySelector(".marketing");
let corporateOverall = document.querySelector(".corporate-overall");
let technicalData = document.querySelector(".technical-data");
let categoryModules = [employerBranding, marketing, corporateOverall, technicalData];
let categoryDropdown = $(".category-dropdown");
for (let i = 0; i < categoryModules.length; i++) {
categoryModules[i].addEventListener("click", function () {
categoryDropdown.slideDown();
});
}
}
dropdown();
The Problem is now: when i click on one of the 4 Modules of course it opens all of the Dropdowns. How can i trigger the correct Dropdown to the correct Module, so only one (the one below the clicked Module) opens up && How can i add with another click a .slideUp() to slide it up again?
3 answers
solution1
2 2020-08-28 09:23:23
Here is a very basic example of what you want to achieve:
const one = document.querySelector('#one'); const two = document.querySelector('#two'); const toggle = (e) => { if (e.target.id === 'one') { one.classList.toggle('active'); two.classList.remove('active'); } else { two.classList.toggle('active'); one.classList.remove('active'); } } one.addEventListener('click', (e) => toggle(e)); two.addEventListener('click', (e) => toggle(e));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { display: inline; margin: 20px; padding: 100px; background-color: #444; } .active { padding: 200px 100px; } </style> </head> <body> <div id="one"></div> <div id="two"></div> </body> </html>
Generally (and especially if creating more dropdowns), I would suggest a more sophisticated approach involving looping through all of them, such as Rounin mentioned.
solution2
1 2020-08-28 09:13:17
Whenever a dropdown is activated with a click:
- Close all the dropdowns (ie. loop through the dropdowns and set each to
.inactive) - Open the activated dropdown
solution3
0 ACCPTED 2020-09-11 08:51:50
After a little while a came up with this solution
function closeDropdown() {
// let employerBrandingDropdown = document.querySelector(".employer-branding-dropdown");
let employerBrandingDropdown = $('.employer-branding-dropdown');
let marketingDropdown = $(".marketing-dropdown");
let corporateOverallDropdown = $(".corporate-overall-dropdown");
let technicalDataDropdown = $(".technical-data-dropdown");
let dropdownArray = [employerBrandingDropdown, marketingDropdown, corporateOverallDropdown, technicalDataDropdown];
window.addEventListener('mouseup', function (event) {
for (let i = 0; i < dropdownArray.length; i++) {
let categoryDropdown = dropdownArray[i];
if ($(event.target !== categoryDropdown) && $(event.target).parent() !== categoryDropdown) {
$(categoryDropdown).stop().slideUp();
}
}
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.