jquery - 折叠div的响应式设计方法

Question

我正在使用带有侧边栏导航菜单的 CSS 主题。我想添加一个按钮，让用户关闭侧边栏。

我熟悉 jQuery 切换、显示、隐藏等...并且我可以编写脚本以多种方式隐藏和显示 div，但是有没有一种兼容的方法可以做到这一点？大多数浏览器和手机？

除了在 jQuery 中显示隐藏之外，还有更好的选择吗？

谢谢

Answer 1

最正确的方法是只切换一个类并使用 css 切换到其余部分...

var $yourSidebar = $(".sidebar");
$(document).on("click.toggleNav touch.toggleNav", ".yourTriggerButton", function(){ 
 $yourSidebar.toggleClass("open");
});

在 CSS 中，您可以使用媒体查询使导航在每个分辨率范围内表现不同，甚至可以使用 CSS 过渡正确设置动画。

这适用于几乎所有移动和桌面设备。

DMEO:http://jsfiddle.net/a24fQ/