用于折叠div的响应式设计方法

Question

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

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

除了jQuery中的show hide之外还有更好的选择吗？

由于

Answer 1

最恰当的方法是使用css ...来切换课程和其他课程。

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

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

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

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

Answer 2

您可以使用css visibility属性并在点击事件中隐藏可见性。 比如jQuery (selector).css('visibility','hidden');

Answer 3

在课堂上使用它......

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

Answer 4

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