当其他下拉菜单切换为活动状态时关闭下拉菜单

Question

我正在尝试关闭让我们说下拉 A 自动，当下拉 B 得到 classList.toggle("active)（在这种情况下，我通过单击切换 ClassList）

我可以手动打开（classList.toggle("active)）和关闭（classList.toggle("inactive)）它，但我想自动关闭它。

现在我得到了这个：

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();

现在的问题是：当我点击 4 个模块之一时，它当然会打开所有下拉菜单。我怎样才能触发正确的下拉菜单到正确的模块，所以只有一个（点击模块下面的那个）打开 && 我如何添加另一个 click 一个 .slideUp() 以再次向上滑动？

Answer 1

每当通过单击激活下拉菜单时：

关闭所有下拉菜单（即循环下拉菜单并将每个下拉菜单设置为 .inactive）
打开激活的下拉菜单

Answer 2

这是您要实现的目标的一个非常基本的示例：

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>

通常（尤其是在创建更多下拉菜单时），我会建议一种更复杂的方法，包括循环遍历所有下拉菜单，例如提到的 Rounin。

Answer 3

过了一会儿想出了这个解决方案

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();
            }
        }
    })
}

当其他下拉菜单切换为活动状态时关闭下拉菜单

Close Dropdown when other Dropdown is toggled active

javascript

class

dropdown