自适应导航菜单调整大小？

Question

我正在尝试构建一个非常简单的响应式导航菜单。 我在这里遇到了一些问题。

1. 当我调整宽度等于或小于768px的窗口时，响应式菜单将不起作用。
2. 当我以低于或等于768px的较低窗口宽度刷新页面时，响应式导航工作......但是，如果我甚至按一个像素调整大小，则会再次隐藏响应式导航显示。

我在这里创建了一个CodePen： http ：//codepen.io/anon/pen/fHsti

非常感谢你的帮助！

Answer 1

更改此代码。 您需要在事件处理程序中使用if语句，否则只有在窗口宽度小于768px时才绑定事件。

jQuery("nav p.active").on("click", function(){
  if (jQuery(window).width() <= 768) {
    jQuery("nav ul").toggle("fast");
  }
});

http://codepen.io/anon/pen/BHbon

Answer 2

老实说，解决此问题的最佳方法是仅使用JS来管理媒体查询之间的导航状态，其他所有内容都应隐藏在媒体查询中。 像一些媒体检查或matchMedia是要配合媒体查询和JS在一起的好方法。

我使用你的标记创建了一个简单的演示 ，我想我得到了你正在寻找的功能。 我使用mediaCheck来清除768px主断点之间任何JS强加的内联样式。