Question

我正在使用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媒体查询。如果您尚未使用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)
        }
    }
});

根据屏幕尺寸禁用功能？

1 个答案: