关闭鼠标悬停功能不起作用?

时间:2016-02-16 09:12:41

标签: jquery

我希望在屏幕尺寸小于768时禁用鼠标悬停和鼠标选项。每件事看起来都很好但是代码不能正常工作。有什么建议吗?我想只有鼠标悬停选项才能在屏幕尺寸大于768时工作。

myscript.js

$(document).ready(function() 
    {
        if ($(window).width() > 768) 
        {
                    $('.dropdown').mouseover(function()
                    {
                        $('.dropdown-toggle', this).next('.dropdown-menu').show();
                    }).mouseout(function()
                    {
                        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
                    });
        }
                else 
                {
                    $('.dropdown').off('mouseenter mouseleave');
                }
          $('.dropdown-toggle').click(function() 
            {
                if ($(this).next('.dropdown-menu').is(':visible')) 
                {
                    window.location = $(this).attr('href');
                }
            });
    });

    $(window).resize(function()
    {
    if ($(window).width() > 768) 
        {
                    $('.dropdown').mouseover(function()
                    {
                        $('.dropdown-toggle', this).next('.dropdown-menu').show();
                    }).mouseout(function()
                    {
                        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
                    });
        }
                else 
                {
                    $('.dropdown').off('mouseenter mouseleave');
                }
          $('.dropdown-toggle').click(function() 
            {
                if ($(this).next('.dropdown-menu').is(':visible')) 
                {
                    window.location = $(this).attr('href');
                }
            });
    });

1 个答案:

答案 0 :(得分:0)

如果它可以帮助您,请尝试以下代码:)

$(document).ready(function() {
    $('.dropdown').mouseover(function() {
        dropDownToggleShowHide(this, false);
    }).mouseout(function() {
        dropDownToggleShowHide(this, true);
    });
    $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
            window.location = $(this).attr('href');
        }
    });
});



function dropDownToggleShowHide(el, hide){
    if ($(window).width() <= 768) {
        return;
    }
    if(hide){
        $('.dropdown-toggle', el).next('.dropdown-menu').hide();    
    }
    else{
        $('.dropdown-toggle', el).next('.dropdown-menu').show();
    }
}