javascript - 如何制作一个在小屏幕上可切换但在大屏幕上始终可见的元素

Question

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

行为应该(基本上)完全像这样demo here .

步骤是:

• 转到小屏幕尺寸(直到 body 轮廓变成金色)
• 检查它是否可切换
• 当菜单被隐藏并且屏幕尺寸变大时，菜单应该出现
• 当菜单未隐藏时，转到更大的屏幕尺寸，它应该保持显示状态
• 在大屏幕上，元素被隐藏时，您应该可以看到它，但是当您拖动到较小的屏幕时，它应该被隐藏
• 在大屏幕上，元素未隐藏时，您应该会看到它，但当您拖动到较小的屏幕时，它应该会隐藏

要实现这一点非常容易:

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

我现在的问题是，我想为这个显示和隐藏设置动画，但我无法通过类切换来实现。

所以我不得不依赖例如slideToggle()这就是我的问题所在，请参阅 demo here .

如果您现在转到小屏幕尺寸，隐藏菜单并使窗口尺寸变大，由于 hide() 函数，菜单 将不会出现。

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

那么我怎样才能让这个切换类带有动画或者在没有调整大小方法的情况下用 js 来实现呢？

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>