Question

这里的事情是这样的（长篇大论，但我有一点意见）

我有一个带有按钮的菜单，如下所示：

*******
***B***
*******

当你悬停它时会扩展

*************
***Button****
*************

现在，当屏幕用于移动时，不再有六边形，它们像普通按钮一样堆叠，显示完整的文字而不必悬停阅读。

我的标记如下：

<a href="#" class="btn">S<span class="comptxt">ervicios</span></a>
<a href="#" class="btn">C<span class="comptxt">ontacto</span></a>
<a href="#" class="btn">F<span class="comptxt">aq</span></a>
<a href="#" class="btn">B<span class="comptxt">log</span></a>

我正在使用jQuery在hover和css上显示和隐藏span标签以处理锚标签的宽度。

$('a.btn').hover(function() {
                $(this).children('span').fadeIn(500);
                $('img').css('opacity', 0.5);
            }, function() {
                $(this).children('span').fadeOut(200);
                $('img').css('opacity', 1);
            });

当悬停时，悬停时淡出淡出。但我把这个javascript设置为IF条件，如果屏幕调整为移动设备（我使用的是500px及以下的移动设备），这段代码不应该运行，这里是if条件：

$(window).resize(function() {
    if ($(window).width() < '501') {
        $('a.btn').hover(function() {
                $(this).children('span');
                $('img').css('opacity', 0.5);
            }, function() {
                $(this).children('span');
                $('img').css('opacity', 1);
            });
    };
    if ($(window).width() > '500') {
            $('a.btn').hover(function() {
                console.log($(window).width());
                $(this).children('span').fadeIn(500);
                $('img').css('opacity', 0.5);
            }, function() {
                //this part of the code runs even if the window is below 500
                $(this).children('span').fadeOut(200);
                $('img').css('opacity', 1);
            });

    };
});

令我感到不安的是条件没有达到并且代码仍在运行。问题是，当按钮正常并且在调整大小后将鼠标悬停在它们上方时，文本会淡出其他的事情：当你加载页面并且屏幕低于500时，它可以正常工作，不会消失。当您调整大小超过500并将调整大小调低到500以下时会出现问题，然后再次发生淡出。

Answer 1

在resize事件中，您永远不会从窗口大小时删除上一个事件处理程序。您可以使用off()：

来实现此目的

$(window).resize(function() {
    if ($(window).width() < '501') {
        $('a.btn').off('hover').hover(function() {
            // rest of your code...
        });
    };
    if ($(window).width() > '500') {
        $('a.btn').off('hover').hover(function() {
            // rest of your code...
        });
    };
});

更好的解决方案可能是在hover处理程序本身内检查窗口的大小，因为窗口调整大小的每个像素的分离/附加事件最终会变得非常慢。试试这个：

$(function() {
    $('a.btn').hover(function() {
        var opacity = $(window).width() < 501 ? 0.5 : 1;
        $('img').css('opacity', opacity);
    }, function() {
        var opacity = $(window).width() < 501 ? 1 : 0.5;
        $('img').css('opacity', opacity);
    });
});

Answer 2

与.hover()和其他函数一样，

.click()与jQuery相加。

每次调整窗口时，都会在悬停时绑定附加功能。

我的意思是，如果窗口的大小调整为200像素，则将该函数绑定200次，实际上它将在悬停时执行200次。

扩展窗口时也是如此：悬停功能将继续保持联系。所以，在悬停时，200＆＃34;小屏幕＆＃34;功能将被执行，200＆＃34;大屏幕＆＃34;功能将被执行。这是一个糟糕的设计。

至少，你必须在应用新的之前取消绑定hover（）：

$('a.btn').unbind('mouseover mouseout').hover(

Answer 3

您的代码无法运行，因为您将其放在$（window）.resize中。它仅在屏幕调整大小时运行，但永远不会悬停。

jQuery - 即使条件不满足，代码也会运行

3 个答案: