响应式Navbar适配问题求助：移动端切桌面端菜单异常隐藏

当然可以用纯CSS实现这个效果，而且能完美解决你遇到的「移动端隐藏菜单后，放大窗口到桌面端菜单仍不显示」的问题。先给你分析下原问题的根源：

你用jQuery的slideToggle()时，它会给.menu-right元素添加内联样式display: none，而内联样式的优先级比CSS媒体查询里的display: block更高，所以即使窗口宽度超过600px，菜单还是会被内联的display: none隐藏。

用纯CSS实现的话，我们可以借助隐藏的复选框和:checked伪类来控制菜单的显示/隐藏，完全不需要JS，还能避免内联样式干扰媒体查询的问题。

修改后的完整代码 #

CSS代码 #

* { margin: 0px; padding: 0px; box-sizing: border-box; }
body { margin: 0px; padding: 0px; }
ul { margin: 0px; padding: 0px; }
ul li { list-style-type: none; }
ul li:hover { list-style-type: none; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
h1 { font-size: 40px; }
.page-block { height: 30%; width: 60%; padding: 6% 10%; background-color: #d7d7d7; text-align: center; margin: 10% auto; border-radius: 10px; position: relative; }
nav { display: block; height: 100%; width: 100%; background-color: #dfdfdf; padding: 10px 30px; position: relative; }
.nav-brand { color: darkgrey; display: inline-block; font-size: 25px; font-weight: bold; }
.active { background-color: orange; color: #fff; }

/* 隐藏原生复选框，作为菜单开关的核心 */
#menu-toggle {
  display: none;
}

/* 菜单按钮样式 */
.right-menu-toggle {
  display: none;
  border: 1px solid darkgrey;
  border-radius: 3px;
  padding: 5px;
  position: absolute;
  top: 16px;
  right: 30px;
  color: darkgrey;
  cursor: pointer;
}

.menu-right { float: right; margin-top: 6px; width: auto; height: 100%; }
.menu-right ul{ margin: 0px; padding: 0px; font-size: 16px; }
.menu-right ul li{ list-style-type: none; display: inline-block; }
.menu-right ul li a{ padding: 8px 20px; text-decoration: none; }
.menu-right ul li a:hover { background-color: darkgrey; color: white; }

/* ------- 移动端适配 ------- */
@media screen and (max-width: 600px) {
  .nav-brand { display: block; }
  .menu-right {
    float: left;
    width: 100%;
    text-align: center;
    border: 1px solid lightgrey;
    /* 用max-height实现滑入滑出动画，默认隐藏 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  .menu-right ul li{ display: block; border-bottom: 1px solid lightgrey; }
  .menu-right ul li a{ display: block; padding: 8px 20px; }
  .right-menu-toggle { display: block; }
  
  /* 复选框被选中时，展开菜单 */
  #menu-toggle:checked ~ .menu-right {
    max-height: 500px;
    transition: max-height 0.5s ease;
  }
}

/* ------- 桌面端强制显示菜单 ------- */
@media screen and (min-width: 601px) {
  .menu-right {
    display: block !important;
    max-height: none !important;
  }
}

HTML代码 #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Navbar</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="demo_nav.css"/>
</head>
<body>
<nav>
  <div class="nav-brand">
    <p><a href="#">Navbar Brand</a></p>
  </div>
  <!-- 隐藏的复选框，作为菜单开关 -->
  <input type="checkbox" id="menu-toggle">
  <!-- 点击label等同于点击复选框，实现菜单切换 -->
  <label for="menu-toggle" class="right-menu-toggle">menu</label>
  <div class="menu-right">
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>
<div class="page-block">
  <h1>NAVBAR DEMO</h1>
</div>
<!-- 这里可以彻底移除jQuery和相关JS代码了 -->
</body>
</html>

核心逻辑说明 #

1. 用复选框做无JS开关：通过隐藏的复选框#menu-toggle和关联的<label>，实现点击菜单按钮切换复选框状态的效果，完全不需要JS介入。
2. CSS伪类控制菜单显示：利用:checked伪类和兄弟选择器~，在复选框被选中时展开菜单，用max-height过渡实现平滑的滑入滑出动画，替代jQuery的slideToggle。
3. 桌面端强制覆盖样式：专门添加min-width: 601px的媒体查询，强制设置菜单为显示状态，不管复选框是否选中，彻底解决窗口缩放后菜单不显示的问题。

这样修改后，不仅能实现和之前一样的交互效果，还能避免JS带来的内联样式冲突，适配逻辑更稳定~

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