Bootstrap多级下拉菜单高度自适应问题求助

方法一：CSS过渡+动态类名（推荐，无需复杂JS计算） #

1. 调整容器CSS样式 #

移除容器原有的固定height设置，改用max-height配合过渡动画来实现平滑的高度变化：

/* 菜单容器基础样式 */
.menu-container {
  overflow: hidden;
  max-height: 60px; /* 这里设置菜单关闭状态下的初始高度，根据你的实际布局调整 */
  transition: max-height 0.3s ease-in-out;
  /* 保留你原有的边框、内边距等样式 */
}

/* 容器展开状态的类 */
.menu-container.expanded {
  max-height: 1000px; /* 设置一个足够容纳所有展开子菜单的上限值 */
}

2. 修改JS触发逻辑 #

点击子菜单触发按钮时，切换子菜单的显示状态，并同步更新容器的展开类：

// 绑定所有子菜单触发元素的点击事件
document.querySelectorAll('.submenu-trigger').forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免父菜单误触发
    const submenu = this.nextElementSibling;
    const container = document.querySelector('.menu-container');
    
    // 切换当前子菜单的显示状态
    submenu.classList.toggle('show');
    
    // 判断是否有任意子菜单处于展开状态，同步切换容器的展开类
    const hasOpenSubmenu = document.querySelector('.submenu.show') !== null;
    container.classList.toggle('expanded', hasOpenSubmenu);
  });
});

方法二：JS动态计算高度（精准控制） #

如果需要高度完全贴合内容，而非用固定上限值，可以用这种方式：

1. 记录初始高度 #

页面加载时，先获取容器关闭状态下的初始高度：

const menuContainer = document.querySelector('.menu-container');
const initialHeight = menuContainer.offsetHeight;

2. 动态计算并设置高度 #

点击触发时，先显示子菜单计算总高度，关闭时还原初始值：

document.querySelectorAll('.submenu-trigger').forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.stopPropagation();
    const submenu = this.nextElementSibling;
    const isSubmenuOpen = submenu.classList.contains('show');
    
    if (!isSubmenuOpen) {
      // 先显示子菜单，计算容器总高度
      submenu.classList.add('show');
      const fullHeight = menuContainer.scrollHeight;
      menuContainer.style.height = `${fullHeight}px`;
    } else {
      // 关闭子菜单，还原初始高度
      submenu.classList.remove('show');
      menuContainer.style.height = `${initialHeight}px`;
      // 过渡动画结束后重置为auto，避免后续内容变化导致高度异常
      setTimeout(() => {
        menuContainer.style.height = 'auto';
      }, 300); // 时间需与CSS过渡时间一致
    }
  });
});

同时给容器添加过渡动画：

.menu-container {
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

关键注意事项 #

• 必须移除容器原有的固定height设置，否则无法实现自适应；
• 处理多层嵌套时，要确保子菜单的展开/收起事件不会冒泡触发父菜单；
• 若有多级子菜单，需递归判断所有子菜单的显示状态，确保容器高度能正确匹配所有展开内容。

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