JavaScript实现多个独立下拉菜单及其内容切换与定位

<nav>                   
    <div class="dropdown">
        <button class="dropbtn" id="active">new</button>
        <div class="dropdown-content">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn">fresh</button>
        <div class="dropdown-content">
            <a href="#">link 4</a>
            <a href="#">link 5</a>
            <a href="#">link 6</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn"><i>naija</i></button>
        <div class="dropdown-content">
            <a href="#">link 7</a>
            <a href="#">link 8</a>
            <a href="#">link 9</a>
        </div>
    </div> 
</nav>

nav {
  display: flex;
}

.dropbtn {
  font-size: 12px;    
  border: none;
  outline: none;
  text-align: center;
  color: #f2f2f2;
  width: 155px;
  padding: 14px 16px;
  background-color: inherit;
  font-family: serif;
  text-transform: capitalize;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative; /* 关键：使下拉内容相对于此容器定位 */
}

.dropdown-content {
  display: none;
  position: absolute; /* 关键：使下拉内容脱离文档流，并相对于父级`.dropdown`定位 */
  background-color: #f1f1f1;
  min-width: 200px;
  height: 200px;
  overflow: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
  padding-bottom: 20px;
  padding-top: 40px;
  opacity: .9;
}

.dropdown-content a {
  color: blue;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  width: 100%;
  font-size: 12px;
  background-color: ;
  border-bottom: 1px solid gray;
}

.dropdown a:hover {
  background-color: gray;
}

.show {
  display: block; /* 用于显示下拉内容 */
}

// 获取所有下拉内容和下拉按钮元素
const dropdowns = Array.from(document.getElementsByClassName("dropdown-content"));
const dropdownButtons = Array.from(document.getElementsByClassName('dropbtn'));

let currentDropdown = -1; // 记录当前打开的下拉菜单索引
let dropdownAmount = 0;   // 记录当前打开的下拉菜单数量

// 为每个下拉按钮添加点击事件监听器
dropdownButtons.forEach(function(dropdownBtn, index) {
  dropdownBtn.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到window，防止立即关闭

    // 切换当前按钮对应下拉内容的显示状态
    dropdowns[index].classList.toggle('show');

    // 更新当前打开的下拉菜单信息
    currentDropdown = index;
    dropdownAmount++;

    // 如果有多个下拉菜单被打开（理论上不应该发生，但作为安全措施），
    // 则关闭除了当前点击的下拉菜单之外的所有其他菜单
    if (dropdownAmount > 1) { 
      for (let i = 0; i < dropdowns.length; i++) {
        const openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show') && i !== currentDropdown) {
          openDropdown.classList.remove('show');
        }
      }
      dropdownAmount = 1; // 重置为1，表示只有一个菜单打开
    }
  });
});

// 为window添加点击事件监听器，用于点击外部区域时关闭所有下拉菜单
window.addEventListener('click', function(event) {
  // 遍历所有下拉菜单，如果它们是打开状态，则关闭它们
  for (let i = 0; i < dropdowns.length; i++) {
    const openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
    dropdownAmount = 0; // 重置打开菜单数量
  }
});