Jquery在响应式网站上切换

Question

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

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

帮助表示感谢 感谢

Answer 1

问题是jQuery.slideToggle（）将内联样式'display'切换为'none'或'block'，它始终保持在那里。因此，当您在移动视图中关闭菜单时，内联的“display：none”将保留，并覆盖所有css属性。

解决方案不是使用内联样式属性，而是使用css类。将回调添加到slideToggle（），这将删除内联样式属性并添加类'open'。之后将其添加到您的css：

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

它会起作用。检查here。