jquery - 如何阻止菜单在桌面上消失(jQuery 切换事件)

Question

我有一个在桌面上可见但在移动视口(viewport)上隐藏的菜单。它通过汉堡包切换在移动设备上可见。

我的问题是，一旦在移动视口(viewport)上激活了移动切换开关，当窗口大小调整为桌面比例时，菜单将不再可见。

取回它的唯一方法是重新加载页面。这不是我想要的情况。我希望它在调整大小时恢复。

(这可能看起来不重要或做作，但考虑到用户将他们的移动屏幕转向侧面:他们会松开非移动菜单。)

我通过 JS Fiddle 附上了一个最小的工作示例。

如果有任何建议，我将不胜感激。我不太擅长 JS/jQ，所以我很欣赏这可能是一个非常菜鸟的问题。

谢谢。

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.hide').slideToggle('slow').addClass("show");
    return false;
  });
});

.block {
  background-color: lightblue;
  border: 2px solid blue;
}

.menu {
  padding: 2em;
  background-color: yellow;
}


/*Toggle controls*/

@media only screen and (max-width: 768px) {
  .hide {
    display: none;
  }
  .show {
    display: visible;
  }
}


/*Hide hamburger icon on desktop*/

@media only screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <div id="toggle" class="hamburger block">
    &#9776;
  </div>

  <div class="site title block">
    Site Title
  </div>

  <div class="menu hide">
    Placeholder for menu
  </div>
</header>

Answer 1

CSS 类的优先级是基于类的声明顺序(级联样式表的定义):如果你使用 2 个不同的类来控制一个元素的可见性，当该元素同时具有两个类时，你在 CSS 中声明的最后一个将支配另一个，直到你删除它。我从您发布的代码中可以理解的与您描述的不同:我明白了
- 汉堡包菜单图标仅在桌面上正确隐藏并在手机上显示；
- 桌面菜单在手机上被 css 隐藏，但是，当点击汉堡包时，您添加 show 类，它在 hide 类上占主导地位(因为它是最后声明的)强制显示菜单。您不会在任何地方删除 show 类，因此如果您在不关闭菜单的情况下从移动设备调整大小到桌面，我希望您的菜单在桌面上可见。

由于 jQuery slide 方法适用于 display 属性，我建议您使用 !important 强制您的桌面菜单显示阻塞，以便即使在关闭菜单的情况下从移动设备调整大小到桌面，菜单也将可见(这就是您想要的，不是吗？)。然后你只需滑动切换带有汉堡包的菜单。即:

@media only screen and (max-width: 768px) {
  .desktop-menu-class {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .desktop-menu-class {
    display: block !important;
  }
}

和

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.desktop-menu-class').slideToggle('slow');
  });
});

PS:你不需要在 jQuery 函数中写任何 return 语句，除非你需要它来做其他事情。