移动导航栏在桌面上消失答案

【问题标题】：Mobile navigation bar disappears on desktop移动导航栏在桌面上消失
【发布时间】：2021-06-21 07:54:39
【问题描述】：

我正在尝试制作一个侧边栏导航，它在桌面上是静态的，在移动设备上是折叠的。问题是当我按下移动设备上的切换按钮时，导航栏保持切换状态并且在桌面上不可见。下面是我的代码：

HTML

<div class="d-flex" id="wrapper">
    <div class="bg-light" id="sidebar-wrapper">
      <div class="sidebar-heading"><img class="heading-img" src="./images/logo.png"></div>
      <div class="list-group list-group-flush nav-group nav-items">
        <a href="index.html" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/home.svg">Home</a>
        <a href="#" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/settings.svg">Settings</a>
        <a href="#" class="list-group-item list-group-item-action bg-light nav-single"><img class="nav-img" src="./images/exit.svg">Exit</a>
      </div>
    </div>

CSS

#menu-toggle{
  display: none;
}

@media (max-width: 768px){
  #menu-toggle{
    display: unset;
  }
}

  <script>
    $("#menu-toggle").click(function(e) {
        $("#wrapper").toggleClass("toggled");
    });
  </script>

有没有办法检测它是否已调整大小并删除“切换”文本

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

我过去遇到过这样的问题，我通过在平板电脑和桌面模式的 css 样式中添加一个 !important 属性来解决它

例如

@media only screen and (min-width: 750px){
  #navigation{
     display: initial !important;
  }
}

!important 属性使导航在桌面模式下始终可见，即使在移动模式下切换按钮后也是如此。

以前有人问过类似的问题，你可以看看下面的链接

link to the question

【讨论】：