jQuery

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 在悬停时显示和隐藏 span 标签，并使用 css 处理锚标签的宽度。

$('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);
            });

    };
});

条件不满足，代码仍然运行s，这让我很害怕。这个问题是，当按钮正常并且您在调整大小后将鼠标悬停在它们上方时，文本会淡出其他事情：当您加载页面并且屏幕低于 500 时，它会正常工作，不会淡出。当您将大小调整到 500 以上并重新调整到 500 以下时，就会出现问题，然后淡出再次发生。

Answer 1

在调整大小事件中，您永远不会删除 window 较大时的前一个事件处理程序。您可以使用 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 处理程序本身中检查 window 的大小，因为 window 是每个像素的 detaching/attaching 事件调整大小最终会非常缓慢。试试这个：

$(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.

相加

每次 window 重新调整时，您都会在悬停时绑定一个附加功能。

我的意思是，如果 window 的大小调整了 200 像素，那么您绑定该函数 200 次，它实际上会在悬停时执行 200 次。

扩展 window 时也是如此：悬停功能将继续绑定。因此，在悬停时，将执行 200 个 "small screen" 个函数，将执行 200 个 "large screen" 个函数。这是一个糟糕的设计。

至少，你必须在应用一个新的之前取消绑定 hover() :

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

Answer 3

您的代码没有运行，因为您将它放在 $(window).resize 中。它只会在调整屏幕大小时运行，但不会悬停。

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

jQuery - Code running even when condition isn't met

html

javascript

css

hover

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

jQuery - Code running even when condition isn't met

html

javascript

css

jquery

hover

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