如何让响应式Navbar点击Burger图标后展开高度？

问题描述 #

响应式布局下，点击.burger汉堡图标后，Navbar的菜单内容会显示，但Navbar本身没有纵向展开高度，仅保持折叠状态的高度，内容溢出显示。JS代码可正常切换.leftNav和.rightNav的v-class-resp类，但高度未随点击变化。

问题原因 #

1. .h-nav-resp类仅设置了折叠状态的height:5vh，但未添加overflow:hidden，导致折叠状态下菜单内容溢出显示，视觉上误以为高度未展开。
2. v-class-resp使用opacity:0控制内容可见性，而非完全隐藏，配合未限制溢出的高度设置，导致内容提前显示但Navbar高度未变化。

解决方案 #

步骤1：修改响应式CSS规则 #

在@media only screen and (max-width: 1120px)媒体查询内，调整以下样式：

/* 折叠状态的Navbar样式，新增overflow:hidden隐藏溢出内容 */
.h-nav-resp{
    height: 5vh;
    overflow: hidden;
    transition: all 0.7s ease-out;
}

/* 替换原opacity设置，改为完全隐藏菜单内容 */
.v-class-resp{
    display: none;
}

步骤2：保留原有JS逻辑（无需修改） #

现有点击事件逻辑可正确切换类，修改CSS后即可联动高度变化：

burger.addEventListener('click', () => {
    rightNav.classList.toggle('v-class-resp');
    navList.classList.toggle('v-class-resp');
    navbarResp.classList.toggle('h-nav-resp');
});

效果说明 #

点击汉堡图标时：

• 移除h-nav-resp类，Navbar高度恢复为响应式下默认的65vh，overflow:hidden失效，内容可正常展开显示
• 移除v-class-resp类，菜单内容从display:none变为默认显示状态

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