Question

我有一个菜单在桌面上可见，但在移动视口中隐藏。通过汉堡切换，它在移动设备上变得可见。

我的问题是，一旦在移动视口上激活了一次移动切换后，将窗口调整为桌面比例时，该菜单就不再可见。

取回它的唯一方法是重新加载页面。我不想这样。我希望它恢复大小。

（这似乎无关紧要，但考虑到用户将手机屏幕侧向旋转：他们会松开非移动菜单。）

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

我将非常感谢您的任何建议。我对JS / jQ不太好，所以我很欣赏这可能是一个菜鸟问题。

谢谢。

git version 2.20.1 (Apple Git-117)

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

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

如何停止菜单在桌面上消失（jQuery切换事件）

1 个答案: