我正在尝试构建一个非常简单的响应式导航菜单。我在这里遇到了一些问题。
- 当我将窗口的宽度调整为等于或小于 768 像素时,响应式菜单将不起作用。
- 当我以等于或小于 768px 的较低窗口宽度刷新页面时,响应式导航可以工作......但是,如果我将大小调整为一个像素,响应式导航显示就会再次隐藏。
我在这里创建了一个 CodePen:http: //codepen.io/anon/pen/fHsti
非常感谢你的帮助!
我正在尝试构建一个非常简单的响应式导航菜单。我在这里遇到了一些问题。
我在这里创建了一个 CodePen:http: //codepen.io/anon/pen/fHsti
非常感谢你的帮助!
老实说,解决这个问题的最好方法是只使用 JS 来管理媒体查询之间的导航状态,其他所有内容都应该隐藏在媒体查询中。MediaCheck或matchMedia 之类的东西是将媒体查询和 JS 联系在一起的好方法。
我使用您的标记创建了一个简单的演示,我想我得到了您正在寻找的功能。我使用 mediaCheck 清除了 768px 主断点之间的任何 JS 强加的内联样式。
更改此代码。您需要if
事件处理程序中的语句,否则它仅在加载时窗口的宽度小于 768px 时才绑定事件。
jQuery("nav p.active").on("click", function(){
if (jQuery(window).width() <= 768) {
jQuery("nav ul").toggle("fast");
}
});