使用原生JavaScript实现移动端友好导航栏遇Logo显示异常问题求助

我帮你分析下这个问题——你遇到的情况大概率是CSS媒体查询的规则写错了，把Logo也一起隐藏了，只有点击汉堡按钮触发JS切换类后，Logo才跟着菜单一起显示出来。咱们一步步来修复：

第一步：给Logo加专属类 #

先修改你的HTML，给Logo的<a>标签加一个独特的类，比如.logo，这样方便我们在CSS里单独控制它：

<!-- Top navigation -->
<div class="topnav" id="myTopnav">
  <a href="#center" class="active logo">Navbar Logo</a>
  <!-- 其他导航链接 -->
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <!-- 汉堡按钮 -->
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

第二步：调整CSS媒体查询规则 #

核心是在移动端视图下，只隐藏普通导航链接，排除Logo和汉堡按钮。把你的CSS改成下面这样：

/* 默认桌面端样式 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* 默认隐藏汉堡按钮 */
.topnav .icon {
  display: none;
}

/* 移动端适配（屏幕宽度≤600px时生效） */
@media screen and (max-width: 600px) {
  /* 只隐藏除了Logo和汉堡按钮之外的链接 */
  .topnav a:not(.logo):not(.icon) {
    display: none;
  }
  /* 显示汉堡按钮 */
  .topnav a.icon {
    float: right;
    display: block;
  }
  /* 导航展开后的样式 */
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /* 确保Logo在展开状态下也正常显示 */
  .topnav.responsive .logo {
    display: block;
  }
}

第三步：检查JavaScript代码 #

确保你的myFunction只是切换导航栏的responsive类，不要额外控制Logo的显示状态。标准的切换代码应该是这样的：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

为什么之前会出问题？ #

之前的CSS大概率是写了类似.topnav a:not(.icon) { display: none; }这样的规则，把Logo也包含进去隐藏了。点击汉堡按钮后，JS给导航栏加上了responsive类，此时所有<a>标签又被设为display: block，所以Logo才会显示出来。通过给Logo加专属类，在媒体查询里排除它，就能让Logo在移动端视图下一直保持显示。

另外还要排查下：有没有其他CSS规则用!important覆盖了Logo的display属性？或者JS里有没有额外的代码主动隐藏/显示Logo？如果有的话，要去掉那些冲突的代码。

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