优化响应式导航栏DOM结构：修复resize重复添加元素问题

问题核心 #

重构语义化ul/li结构的响应式导航后，将「更多」触发改为button，下拉项放入ul.more-items，但浏览器resize时会重复创建并添加这个下拉菜单容器，导致DOM冗余。

修复思路 #

核心是复用固定的下拉菜单容器，不要在resize回调里重复创建DOM元素，而是提前初始化好容器，每次仅更新容器内的子元素。

完整代码实现 #

HTML（语义化结构，提前创建下拉容器） #

<nav class="responsive-nav">
  <ul class="nav-items">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#">产品介绍</a></li>
    <li class="nav-item"><a href="#">解决方案</a></li>
    <li class="nav-item"><a href="#">客户案例</a></li>
    <li class="nav-item"><a href="#">关于我们</a></li>
    <li class="nav-item"><a href="#">联系方式</a></li>
    <!-- 提前预留更多按钮的容器，下拉菜单预先创建 -->
    <li class="more-wrapper">
      <button class="more-btn">更多 ▾</button>
      <ul class="more-items"></ul>
    </li>
  </ul>
</nav>

CSS（基础样式与响应式控制） #

.responsive-nav {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.nav-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 15px;
}

.nav-item {
  white-space: nowrap;
}

.nav-item a {
  text-decoration: none;
  color: #333;
  padding: 12px 0;
  display: block;
}

.more-wrapper {
  position: relative;
}

.more-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 12px 0;
  color: #333;
  font-size: inherit;
}

.more-items {
  position: absolute;
  top: 100%;
  right: 0;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
}

.more-wrapper:hover .more-items {
  display: block;
}

.more-items .nav-item {
  padding: 8px 16px;
}

JavaScript（复用容器，防抖优化） #

// 获取DOM元素
const navItemsContainer = document.querySelector('.nav-items');
const moreBtnWrapper = document.querySelector('.more-wrapper');
const moreItemsContainer = document.querySelector('.more-items');
// 排除更多按钮的导航项
const navItems = Array.from(document.querySelectorAll('.nav-item:not(.more-wrapper)'));

// 防抖函数，减少resize触发频率
function debounce(func, delay = 200) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 核心处理函数：调整导航项的位置
function handleNavOverflow() {
  // 先把下拉菜单里的所有项移回主导航（放在更多按钮前面）
  while (moreItemsContainer.firstChild) {
    navItemsContainer.insertBefore(moreItemsContainer.firstChild, moreBtnWrapper);
  }

  // 计算导航容器可用宽度和各项总宽度
  const navContainerWidth = navItemsContainer.offsetWidth;
  let totalItemsWidth = 0;
  const itemsToMove = [];

  // 遍历导航项，判断哪些需要移入下拉
  navItems.forEach(item => {
    totalItemsWidth += item.offsetWidth;
    // 加上更多按钮的宽度，判断是否溢出
    if (totalItemsWidth + moreBtnWrapper.offsetWidth > navContainerWidth) {
      itemsToMove.push(item);
    }
  });

  // 将溢出项移入下拉菜单
  itemsToMove.forEach(item => {
    moreItemsContainer.appendChild(item);
  });

  // 根据下拉是否有内容，控制更多按钮的显示
  moreBtnWrapper.style.display = moreItemsContainer.children.length > 0 ? 'block' : 'none';
}

// 初始化执行一次
handleNavOverflow();

// 绑定resize事件，用防抖优化
window.addEventListener('resize', debounce(handleNavOverflow));

关键修复点 #

1. 预先创建下拉容器：在HTML里提前写好ul.more-items，而非每次resize时动态创建，从根源避免重复添加DOM元素。
2. 先回移再计算：每次处理前先把下拉菜单里的项移回主导航，确保宽度计算的准确性，也避免重复项。
3. 防抖优化：减少resize事件的触发频率，提升页面性能，同时避免频繁DOM操作导致的异常。

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