JavaScript实现多功能下拉菜单：解决唯一ID与事件处理的常见问题

<nav>                   
    <div class="dropdown">
        <button class="dropbtn">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; /* 使用Flexbox布局，使按钮水平排列 */
}

.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;
    cursor: pointer; /* 添加手型光标提示可点击 */
}

.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 currentDropdownIndex = -1; // 记录当前打开的下拉菜单索引
let openDropdownCount = 0;     // 记录当前打开的下拉菜单数量

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

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

    // 更新当前打开菜单的索引和数量
    if (dropdowns[index].classList.contains('show')) {
      currentDropdownIndex = index;
      openDropdownCount++;
    } else {
      currentDropdownIndex = -1; // 如果关闭，则重置索引
      openDropdownCount--;
    }

    // 如果有多个下拉菜单处于打开状态，则关闭除了当前点击的菜单之外的所有菜单
    if (openDropdownCount > 1) { 
      for (let i = 0; i < dropdowns.length; i++) {
        const openDropdown = dropdowns[i];
        // 如果该下拉菜单是打开的，并且不是当前点击的菜单，则关闭它
        if (openDropdown.classList.contains('show') && i !== currentDropdownIndex) {
          openDropdown.classList.remove('show');
          openDropdownCount--; // 减少打开菜单计数
        }
      }
    }
    // 确保在任何时候，openDropdownCount最多为1（表示只有一个菜单是打开的）
    if (openDropdownCount > 1) {
        openDropdownCount = 1;
    } else if (openDropdownCount < 0) {
        openDropdownCount = 0;
    }
  });
});

// 添加全局点击事件监听器，用于点击外部区域时关闭所有下拉菜单
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');
    }
  }
  // 重置打开菜单计数
  openDropdownCount = 0;
  currentDropdownIndex = -1;
});