汉堡按钮与ul元素切换交互的两个技术问题求助

问题1：垂直菜单无法推挤下方内容 #

根源在于nav元素设置了固定height: 2.2em，菜单展开后，nav高度不会随内容自动扩展，菜单被限制在nav内部，无法向下撑开空间推挤下方元素。

修复方式：将nav的固定高度改为最小高度，允许它随内容自动调整：

nav {
  min-height: 2.2em; /* 替换原height属性 */
  width: 100%;
  background-color: black;
}

问题2：窗口切换回桌面尺寸后导航栏空白 #

jQuery的toggle()会给#list-container添加行内样式display: none，当屏幕从移动端切回桌面端时，行内样式优先级高于媒体查询的CSS，导致菜单保持隐藏状态。

修复方式：监听窗口resize事件，当屏幕宽度超过700px时，强制移除行内的display样式，让媒体查询重新控制菜单显示：

$("#hamburger").click(function(){
  $("#list-container").toggle();
});

// 监听窗口尺寸变化
$(window).resize(function() {
  if ($(window).width() > 700) {
    $("#list-container").removeAttr("style");
  }
});

完整优化后代码 #

CSS #

nav {
  min-height: 2.2em;
  width: 100%;
  background-color: black;
}

#burger-button {
  display: none;
}

#list-container ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: left;
  margin: 0;
  padding: 0.5em 0;
}

#list-container ul li {
  margin-right: 1.5em;
}

#list-container ul li a {
  color: white;
  text-decoration: none;
}

@media screen and (max-width: 700px) {
  #burger-button {
    display: unset;
    padding: 0.3em;
  }
  
  #hamburger {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2em;
  }
  
  #list-container {
    display: none;
    margin-top: 0.5em;
    text-align: left;
  }

  #list-container ul {
    display: block;
    margin-left: 1em;
    padding: 0;
  }

  #list-container ul li {
    margin: 0.5em 0;
  }
}

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="CU">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 
    <style>
      /* 将上述CSS代码放在此处或外部样式文件中 */
    </style>
  </head>
  
  <body>
    <nav>
      <div id="burger-button"><button id="hamburger">&#9776;</button></div>
      <div id="list-container" class="container-fluid">
        <ul>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
        </ul>
      </div>
    </nav>
    
    <div style="padding: 1em;">I want the emerging vertical ul to push this element down, which it is not currently doing (even though the ul element has not been positioned absolutely or relatively)</div>
    
    <script>
      $("#hamburger").click(function(){
        $("#list-container").toggle();
      });

      $(window).resize(function() {
        if ($(window).width() > 700) {
          $("#list-container").removeAttr("style");
        }
      });
    </script>  
  </body>
</html>

额外优化说明：

• 给链接添加白色文字，避免黑色背景下无法识别
• 调整菜单内外边距，提升视觉舒适度
• 优化汉堡按钮样式，去除默认边框和背景，适配黑色导航栏

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