折叠div的响应设计方法 [英] Responsive design method for collapsing a div

问题描述

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

I'm using a CSS theme with a sidebar navigation menu. I'd like to add a button, to let users close the sidebar.

我熟悉jQuery的切换，显示，隐藏等...，我可以编写脚本来以多种方式隐藏和显示div，但是有一种兼容的方式可以执行此操作大多数浏览器和手机?

I'm familiar with jQuery toggle, show, hide, etc... and I could write the script to hide and show the div a number of ways, but is there a compliant way to do it, that will work on most browsers and phones?

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

Is there a better option other than show hide in jQuery?

谢谢

推荐答案

最正确的方法是只切换一个类，然后使用CSS切换到其余类...

The most proper way would be to just toggle a class and to the rest with css...

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

在CSS中，您可以使用媒体查询来使导航在每个分辨率范围内的行为都不同，甚至可以使用CSS过渡正确地设置动画.

in your css, you can use media queries to make the navigation behave differently for each resolution range and even animate properly using css transitions.

这几乎可以在所有移动和台式设备上使用.

This will work on almost all mobile and desktop devices.

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

这篇关于折叠div的响应设计方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！