jQuery在响应站点​​上切换 [英] Jquery toggle on responsive site

问题描述

我正在一个响应式网站上，那里有一个包含类别的菜单.对于较小的设备，当视口缩小时，类别框将隐藏起来，并且出现一个按钮，用户可以单击该按钮，并使用jquery切换类别导航.问题在于，如果您在切换导航后重新调整屏幕大小，那么当您返回较大的视口时，屏幕将无法正确显示.我不确定如何解决此问题，或者不确定是否有更好的解决方法.

I'm working on a responsive site where I have a menu containing categories. As the viewport shrinks for smaller devices the category box gets hidden and a single button appears that someone can click and using jquery it toggles the category nav. The problem is that if you re-size the screen once you've toggled the nav, it doesn't re-appear properly when you go back to a larger viewport. I'm not sure how to fix this or if there is a better way around it.

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

I have an example here: http://jsfiddle.net/kZ3kW/

帮助表示赞赏 谢谢

推荐答案

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

Problem is that jQuery.slideToggle() toggles inline style 'display' to 'none' or 'block' and it remains there all the time. So when you close menu in mobile view, the inline 'display: none' will remain and it overrides all css properties.

解决方案不是使用内联样式属性，而是使用css类.向您的slideToggle()添加回调，这将删除嵌入式样式属性并添加类"open".之后，将其添加到您的CSS:

Solution is not to use inline style attribute but instead use the css class. Add callback to your slideToggle() which will remove inline style attribute and add class 'open'. After that add this to your css:

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

，它将起作用.在此处进行检查.

and it will work. Check it here.

这篇关于jQuery在响应站点​​上切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！