Question

我有一个菜单，当它悬停在990px以上时会打开菜单但是当它在下面时，菜单会变成一个汉堡菜单，你需要打开它。问题是我想在低于990px时禁用悬停。这仅在窗口低于990px时打开。如果它从990px以上开始并降低到990px以下，则窗口会保持悬停状态，因为窗口打开时高于990px标记。我试图给它添加一个resize（），但它似乎不起作用。

jQuery(function($) {
    if ($(window).width() >= 992) {
        $('.navbar .dropdown').hover(function () {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
        }, function () {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
        });
    }else if ($(window).width <= 992) {
                $('.navbar .dropdown').off('mouseenter');
            }
});

现在，当窗口调整大小时，无论如何都会完全禁用悬停。

Answer 1

您使用的是错误，因为$(window).resize();是一个在窗口大小发生变化时触发并且不返回数字的事件。以下是.resize()

的一个很好的解释post

($(window).resize() < 990)
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
}

更改为

else if($(window).width() <990){
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
}

或只是简单地

else{
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
}

Answer 2

您还应该在resize事件

上为代码添加触发器

$(window).resize(function() { /* do what you want */})

Answer 3

这就是我想出来的，它可以用于将来的参考：

jQuery(function ($) {
    if ($(window).width() > 992) {
        $('.navbar .dropdown').hover(function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function () {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function () {
            location.href = this.href;
        });
    }

    $(window).resize(function () {
        var win = $(window).width();
        if (win >= 992) {
            $('.navbar .dropdown').hover(function () {
                $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
            }, function () {
                $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
            });
            // this takes off the hover event if using on desktop
        } else if (win < 992) {
            $('.navbar .dropdown').off('mouseenter');
        }
    });
});

窗口调整大小不起作用

3 个答案: