如何做一个在小屏幕尺寸上可切换但在大屏幕尺寸上始终可见的元素

Question

我想要一个在小屏幕尺寸下可切换并且在中等尺寸以上屏幕上始终可见的菜单。

行为应该（基本上）与 demo here 完全一样。

步骤如下：

• 转到小屏幕尺寸（直到身体轮廓为金色）
• 检查它是否可以切换
• 当菜单被隐藏并且您获得更大的屏幕尺寸时，菜单应该会出现
• 当菜单没有隐藏时，转到更大的屏幕尺寸，它应该保持显示
• 在大屏幕尺寸下，元素被隐藏时，您应该可以看到它，但当您拖动到较小尺寸时，它应该被隐藏
• 在大屏幕上，并且元素未隐藏时，您应该可以看到它，但是当您拖动到较小的尺寸时，它应该被隐藏

要实现这一点很容易：

$(".click").click(function() {
  $(".menu").toggleClass("hidden-md-down");
});

我现在的问题是我想为这个节目制作动画并隐藏，但我无法使用类切换来做到这一点。

所以我必须依赖例如slideToggle()，这就是我的问题所在，请参阅demo here。

如果您现在转到小屏幕尺寸，隐藏菜单并增大窗口尺寸，menu 将不会出现，因为 hide() 函数。

我知道这可以通过 $(window).resize 解决，但我绝对不想要这个解决方案，因为这样一个小功能的性能很糟糕。

那么我怎样才能让这个切换类带有动画或使用 js 而不使用 resize 方法呢？

Answer 1

我已将我的评论放在答案中：“为了获得最佳性能，请将您的窗口大小检查连接到浏览器调整大小的末尾，而不是每个阶段。”

此代码有效，它仅在窗口调整大小事件结束后运行 0.5 秒，而不是在（更好的性能）期间运行。运行代码完整页面并挤压浏览器窗口以查看它的运行情况。

您可以选择运行菜单切换或停用它，而不是发送文本值#width 和#height；我会通过删除您最初用于激活菜单的 js 类来做到这一点。

并让您的菜单成为无序列表，并使用 css 将其设置为桌面上的内联和移动设备上的无项目列表。

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    var widthReport = $("#width").text($(this).width());
    var heightReport = $("#height").text($(this).height());
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="width"></div>
<div id="height"></div>