Question

我在窗口正常屏幕时使用悬停功能

jQuery(".main-menu ul li").hover(
    function() {
        jQuery(this).children("ul").slideToggle(1000);
    }

但我希望当屏幕为768px时，移动响应此悬停功能不起作用，点击功能将激活。我使用过这个功能

    jQuery(window).resize(function() {
        var screenWidth = jQuery(window).width();

        if(screenWidth <= 768){
            jQuery(".main-menu ul li").click(function() {
                jQuery(this).children("ul").slideToggle(1000);
            });

        }
    });

但它不起作用。

Answer 1

在调整大小窗口后尝试取消绑定上一个点击事件：

jQuery(window).resize(function() {
    $( ".main-menu ul li").unbind();
    var screenWidth = jQuery(window).width();

    if(screenWidth <= 768){
        jQuery(".main-menu ul li").click(function() {
            jQuery(this).children("ul").slideToggle(1000);
        });

    }
});

Answer 2

试试这个

<style>
@media screen and (min-width: 768px) {

    .main-menu ul li:hover {
    // Your style changed

        }
    }
</style>

如何从移动响应屏幕中删除悬停功能

2 个答案: