在特定视口大小以下，如何从选择器中取消挂钩或删除功能

Question

我确定已经提出并回答了这个问题，但是我找不到正确的搜索条件来查找它。 我正在使用slimmenu jquery插件，该插件的初始化非常简单。

$('#navigation').slimmenu({});

我在导航菜单上使用它，效果很好。 我希望它仅在768px或以下激活，而在768px以上停用。 激活工作正常，但是如果我将尺寸重新设置为超过768px，它仍然处于活动状态。 我不确定如何删除或解除绑定。

这是我的代码：

$(window).on("load resize", function () {
    if ($(window).width() < 769) { // only run if 768 or less
        $('.nav.main-nav').addClass('slimmenu'); // add class to nav to trigger responsive nav
        $('.nav.main-nav.slimmenu').slimmenu({ // responsive nav function
        });
    }
    else {
    }
}); // end on load resize

这是我似乎无法工作的“其他”部分。 我尝试了很多事情，包括1）删除“ slimmenu”类2）unbind（），off（），remove（），detach（）

该插件在激活时会添加语义标记，而在未激活时我需要将其删除，因为当不使用导航菜单时，它会弄乱样式。 如果确实有办法，我不知道如何“撤消” slimmenu功能。

谢谢你的帮助！

Answer 1

为什么不使用CSS媒体查询来更改样式？

@media all and (max-width: 768px) {
            .yourClass {
                       //styles to apply at 768px or below
            }
}