根据屏幕尺寸禁用功能?

Question

Im 使用 jquery 在引导 4 中执行悬停下拉菜单。但是，当我调整大小到折叠视图 (991( 时，我将下拉列表显示为块元素，以便在用户视图时打开它们，而不必单击或悬停下拉列表。我的问题是该函数正在尝试运行，并且在悬停时会导致一些奇怪的摇晃效果。有没有办法根据屏幕尺寸禁用该功能???感谢您的建议！

$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200)
});

Answer 1

您可以使用 Modenizr Media Query 来实现此目的。如果尚未使用 Modernizr，则需要将其包含在项目中，并选择.mq()功能：https://modernizr.com/download?mq-setclasses

然后，在悬停功能中，您可以包含媒体查询。您可以在悬停事件的每个回调中包含两次媒体查询，也可以通过以下方法简化一些：

$('.navbar .dropdown').on('mouseenter mouseleave', function(e) {
if (Modernizr.mq('(min-width: 991px)')) {
if( e.type == 'mouseenter' ) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
} else {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200)
}
}
});