Question

我正在为响应式网站构建一个菜单 - 我的查询是人们认为显示/隐藏菜单的最佳解决方案。

菜单隐藏在768px并显示一个按钮 - 我正在考虑添加一个简单的js脚本

$('.menu-btn).click(function(){
  $('nav ul').slidetoggle();

});

或类似的..

在点击时切换菜单 - 但我担心的是如果用户再次隐藏它，然后将屏幕扩展到768以上，菜单将保持隐藏状态，并且没有按钮可以重新显示。

是否有更好的跨浏览器/设备解决方案？还是仅限CSS的解决方案？这也需要在IE8上运行。

Answer 1

而不是使用slideToggle，只需在open元素上切换#nav类。然后在“移动”大小的媒体查询中，让#nav.open显示菜单（我通过将#nav.open > ul设置为display:block;来完成此操作。）

示例：

示例不是动画，但您可以在高度上添加CSS3过渡，而不是仅更改元素的display:none;。 CSS3过渡在IE 8或9中不起作用，菜单只会出现，但没有移动设备运行IE8或9，所以这真的不应该是一个问题。

Answer 2

嗯，您的问题有几个解决方案，例如：

*代替slidetoggle，使用toggleClass，仅适用于768px或类似this;

*或使用仅限css的方法，在代码顶部使用复选框和标签，将button标记替换为label标记;如果checkbox为checked，则会显示菜单，例如this;