下拉菜单多负z-index层级动态切换的代码优化方案咨询

最优实现方案 #

推荐用样式类切换的方案实现，把样式和逻辑分离，可维护性和性能都比直接操作z-index属性高很多，实现步骤如下：

1. 抽离公共CSS #

把所有菜单项的通用样式、激活态样式都放在CSS文件中，不要硬编码在JS里：

/* 下拉菜单项公共样式 */
.dropdown-item {
  position: absolute;
  z-index: -2;
}
/* 激活态样式，层级最高 */
.dropdown-item.active {
  z-index: -1;
}

2. HTML结构调整 #

给所有菜单项加上统一的dropdown-item类，初始状态给默认激活的One项加上active类即可：

<div class="dropdown-item one active">One</div>
<div class="dropdown-item two">Two</div>
<div class="dropdown-item three">Three</div>
<div class="dropdown-item four">Four</div>

3. 交互逻辑实现 #

jQuery版本（适配你现有技术栈）

// 给所有下拉菜单项绑定点击事件
$('.dropdown-item').click(function() {
  $('.dropdown-item').removeClass('active');
  $(this).addClass('active');
});

原生JS版本（无jQuery依赖场景）

const menuItems = document.querySelectorAll('.dropdown-item');
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    menuItems.forEach(i => i.classList.remove('active'));
    item.classList.add('active');
  });
});

方案优势 #

• 代码复用性高，后续新增菜单项只需加dropdown-item类，无需修改JS逻辑
• 样式逻辑分离，后续调整层级、定位等属性只需修改CSS，无需改动JS代码
• 类切换的渲染性能比直接修改CSS属性更高，代码可读性也更好

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