移動導航欄在桌面上消失

Question

我正在嘗試在桌面上制作一個側邊欄導航，它是 static 並在移動設備上折疊。 問題是當我按下移動設備上的切換按鈕時，導航欄保持切換狀態並且在桌面上不可見。 下面是我的代碼：

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;
  }
}

JS

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

有沒有辦法檢測它是否已調整大小並刪除“切換”文本

Answer 1

我過去遇到過這樣的問題，我通過在平板電腦和桌面模式的 css 樣式中添加一個 !important 屬性來解決它

例如

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

.important 屬性使導航在桌面模式下始終可見，即使在移動模式下切換按鈕后也是如此。

以前有人問過類似的問題，你可以看看下面的鏈接

鏈接到問題