时间戳

首页 > 解决方案 > 如何在手机上隐藏导航栏？

javascript - 如何在手机上隐藏导航栏？

问题描述

这已经被问了一百万次了。我已经尝试了在这里找到的每一个解决方案，但没有一个对我有用。我有这个导航栏：

<div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark hidden-sm" id="navbar">
    <ul class="navbar-nav" id="navToHide">
      <li class="nav-item active">
        <a class="nav-link" href="#quemsou" id="link1">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" id="link">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" id="link">Link</a>
      </li>
     
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="" href="#" id="burguerDrop"><i class="fa fa-bars" style="font-size:40px; color:white;"></i></a>
      </li>
  </ul>
    
  </nav>
  </div>

而这个 jQuery/JS：

$(document).ready(function() {
  if (document.documentElement.clientWidth > 480) {
    $("#navbar").addClass("fixed-top");
    $("#burguerDrop").hide();
  } else {
    $("#navbar").removeClass("fixed-top");
    $("#navToHide").hide();
    $("#burguerDrop").show();
  }
});

无论如何，我都无法在手机上隐藏我的导航。我无法隐藏导航或导航链接。但我可以隐藏和展示我的“burguerDrop”。我的“buguerDrop”工作正常，但它没有显示在我的计算机网络浏览器上。但是，它在移动设备上显示的正是我想要的。

但在其他元素中，我不能这样做。我不知道为什么。我试过同时使用“ css('display', 'none');”和“ hide();”。它们都不能隐藏我的导航栏，但它们都可以显示我的burguerDrop.

我完全不知道为什么会这样。

标签： javascriptjquerytwitter-bootstrapbootstrap-4

解决方案

既然您已经使用引导程序，为什么不简单地使用 css 断点。

.navToHide {
  display: none;
}
@include media-breakpoint-up(sm) {
  .navToHide {
    display: block;
  }
}

推荐阅读