jquery - 响应式网站上的 Jquery 切换

Question

我正在一个响应式网站上工作，我有一个包含类别的菜单。随着较小设备的视口缩小，类别框被隐藏，并且出现一个按钮，有人可以单击并使用 jquery 它切换类别导航。问题是，如果您在切换导航后重新调整屏幕大小，当您返回更大的视口时，它不会正确重新显示。我不确定如何解决这个问题，或者是否有更好的解决方法。

我在这里有一个例子：http: //jsfiddle.net/kZ3kW/

帮助表示感谢

Answer 1

问题是 jQuery.slideToggle() 将内联样式“显示”切换为“无”或“阻止”并且它一直保持在那里。因此，当您在移动视图中关闭菜单时，内联的“显示：无”将保留并覆盖所有 CSS 属性。

解决方案是不使用内联样式属性，而是使用 css 类。向您的 slideToggle() 添加回调，这将删除内联样式属性并添加类“打开”。之后将此添加到您的CSS：

.cat-tbl.open {
    display: block;   
}

它会起作用。在这里检查。