折叠div的响应式设计方法答案

【问题标题】：Responsive design method for collapsing a div折叠div的响应式设计方法
【发布时间】：2012-05-29 19:42:01
【问题描述】：

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

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

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

谢谢

【问题讨论】：

我认为大多数浏览器和手机都会支持 toggle 。选择您当前的解决方案。
@PriyankPatel 是的，我确定切换是受支持的，而且似乎是一个简单的 jquery 解决方案，只是想知道人们是否使用其他方法。

标签： jquery css responsive-design

【解决方案1】：

你可以使用css可见性属性并使可见性：点击事件时隐藏。喜欢jQuery (selector).css('visibility','hidden');

【讨论】：

【解决方案2】：

在课堂上使用它...

div
{
display:none;
}
div:hover
{
display:block;
}

【讨论】：

:hover... 将手指悬停在手机上？

【解决方案3】：

最合适的方法是只切换一个类，然后用 css 切换到其余部分...

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

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

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

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

【讨论】：

CSS 过渡会比使用 jQuery 效果更好吗？
@Anagio 绝对是。样式的 CSS ist。 JavaScript 应该只用于应用程序逻辑...通常您希望将应用程序逻辑与设计和动画分开。除此之外，它的性能要好得多，尤其是在移动设备上..
谢谢，效果很好，我把那个小提琴分叉到我的帐户里了

【解决方案4】：

我认为没有实际更好的方法，然后使用 JS。因为您需要处理按钮单击时的切换。使用 jQuery、ExtJS 或直接 JS 是使用工具的问题。 t 因此，在这种情况下，使用 JavaScript 是绝对正常的。

【讨论】：