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

Posted 2023-05-08

【中文标题】如何在手机上隐藏导航栏？

【英文标题】：How do I hide a navbar on mobile?

【发布时间】：2021-08-17 17:43:21

【问题描述】：

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

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

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

【问题讨论】：

嗨，Júlio Oliveira，我想你所缺少的只是对 $("#navbar").hide(); 的调用。请让我知道我提供的答案是否适合您？

我试过了，还是不行：

您正在使用引导程序，只需使用：class="d-none d-md-block" 这将在小于 md 的设备上隐藏您的元素

【参考方案1】：

注意：根据其他答案和 cmets，这可以通过 CSS 样式或使用内置的 Bootstrap 类更清晰地完成。

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

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

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


$(document).ready(setupMobile);
window.addEventListener('resize', setupMobile);

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

【讨论】：

感谢您的回答！！！我实际上是按 ctrl+c/ctrl+v 将您的代码放入我的代码中，但它仍然无法正常工作。我不知道为什么。我的项目中几乎没有其他脚本，它仍然非常小......我认为我的引导导航栏中缺少一些东西

您好 Júlio，如果我的原始答案无效，我很抱歉。我已经更新了答案并在 Codepen 上提供了一个演示供您结帐。请让我知道这是否适合您？

【参考方案2】：

既然你已经在使用 bootstrap，为什么不直接使用 css 断点。

.navToHide 
  display: none;

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

【参考方案3】：

有一种纯粹的 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