Question

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

<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。

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

Answer 1

注意：根据其他答案和评论，这可以通过 CSS 样式或使用内置 Bootstrap 类更干净地完成。

回答您最初的问题：您缺少的主要内容是在正确的位置显示和隐藏元素。

我重构了您的代码，以便您可以使用 window.resize 事件：

const Tab = createTabNavigator();

这里有一个 demo on Codepen 来展示这个解决方案的实际效果。

Answer 2

有一种纯粹的 CSS 方式可以做到这一点。位置粘性基本上允许元素在其父元素中滚动。如果您想隐藏汉堡图标，您可以对媒体查询执行 display: none，如下所示。

   #navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
  }
@media screen and (min-width: 480px) {
  #burguerDrop {
    display: none;
  }
  
}

这是代码笔： https://codepen.io/jeffteachestheweb/pen/YzZEqRq

Answer 3

既然你已经在使用 bootstrap，为什么不简单地使用 css 断点。

serie: {
  pointInterval: 12 * 3600 * 1000, // 12 hours interval
  ...
}

如何在移动设备上隐藏导航栏？

3 个答案: