导航菜单开发求助：切换.active类、下拉菜单及添加.black-bg类

Hey，针对你要开发的这个导航菜单需求，我整理了一套完整的实现方案，包含HTML、CSS和JS代码，完全覆盖你提到的所有功能点：

1. 构建HTML结构 #

首先我们需要一个清晰的关联结构，用data-target属性把导航项和对应的下拉容器绑定起来，这样后续JS可以精准定位目标：

<nav class="nav-menu">
  <div class="nav-item" data-target="dropdown-1">导航项1</div>
  <div class="nav-item" data-target="dropdown-2">导航项2</div>
  <div class="nav-item" data-target="dropdown-3">导航项3</div>
</nav>

<!-- 下拉菜单容器 -->
<div class="dropdown-container" id="dropdown-1">
  <p>下拉内容1：支持放置子菜单/自定义内容</p>
</div>
<div class="dropdown-container" id="dropdown-2">
  <p>下拉内容2：可扩展任意HTML结构</p>
</div>
<div class="dropdown-container" id="dropdown-3">
  <p>下拉内容3：根据需求自由修改</p>
</div>

<!-- 页面主内容区 -->
<main class="main-container">
  <h2>页面核心内容</h2>
  <p>点击导航项时，这里会切换黑色背景样式</p>
</main>

2. 基础CSS样式 #

定义激活状态、下拉显隐、主内容区背景切换的样式，添加过渡动画让交互更流畅：

/* 导航项基础样式 */
.nav-item {
  display: inline-block;
  padding: 12px 24px;
  margin: 0 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 导航项激活状态 */
.nav-item.active {
  background-color: #2c3e50;
  color: #fff;
}

/* 下拉容器默认隐藏 */
.dropdown-container {
  display: none;
  padding: 16px;
  margin: 10px 0;
  background-color: #ecf0f1;
  border-radius: 4px;
}

/* 下拉容器展开状态 */
.dropdown-container.active {
  display: block;
}

/* 主内容区基础样式 */
.main-container {
  padding: 24px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 主内容区黑色背景状态 */
.main-container.black-bg {
  background-color: #34495e;
  color: #fff;
}

3. JavaScript核心逻辑 #

实现所有交互功能，每一步都对应你的需求点，注释已经写得很清楚：

// 获取需要操作的DOM元素
const navItems = document.querySelectorAll('.nav-item');
const dropdownContainers = document.querySelectorAll('.dropdown-container');
const mainContainer = document.querySelector('.main-container');

// 给每个导航项绑定点击事件
navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免触发页面全局点击的重置逻辑
    e.stopPropagation();

    // 1. 切换导航项激活态：先移除所有项的.active，再给当前项添加
    navItems.forEach(nav => nav.classList.remove('active'));
    this.classList.add('active');

    // 2. 精准控制下拉容器：关闭所有下拉，只展开当前项对应的目标容器
    const targetId = this.dataset.target;
    dropdownContainers.forEach(dropdown => {
      dropdown.id === targetId 
        ? dropdown.classList.add('active') 
        : dropdown.classList.remove('active');
    });

    // 3. 给主内容区添加黑色背景类
    mainContainer.classList.add('black-bg');
  });
});

// 点击页面其他区域时，重置所有激活状态和背景样式
document.addEventListener('click', function() {
  navItems.forEach(nav => nav.classList.remove('active'));
  dropdownContainers.forEach(dropdown => dropdown.classList.remove('active'));
  mainContainer.classList.remove('black-bg');
});

功能验证 #

这个实现完全覆盖了你提到的所有需求：

• 点击导航项时，仅当前项会添加.active类，前一项的激活态会被自动移除
• 已有下拉菜单展开时，点击其他导航项会一键关闭原下拉，同时展开新的目标下拉
• 只会展开当前导航项对应的下拉容器，不会出现所有下拉同时展开的问题
• 点击导航项时，main-container会自动添加.black-bg类
• 点击导航项之外的页面任意区域，所有激活类和背景类都会被移除

内容的提问来源于stack exchange，提问作者Nesta