Jquery在响应式网站上切换

时间:2012-08-09 08:30:45

标签: jquery responsive-design

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

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

帮助表示感谢 感谢

1 个答案:

答案 0 :(得分:3)

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

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

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

它会起作用。检查here