在浏览器调整大小时更改超链接位置

Change Hyperlink location on browser resize

本文关键字：超链接 位置 小时 浏览器 调整      更新时间：2023-09-26

我试图在浏览器调整大小时更改超链接指向的位置，但我要么阻止所有链接，要么不阻止

var $w = window.innerWidth || document.documentElement.clientWidth;
if ($w > 1025) {
    $('a.something').each(function (e) {
        e.preventDefault();
        location.href = "/products.html";
    });
} else {
    $('a.something').each(function (e) {
        e.preventDefault();
         location.href = "javascript:void(0);";
    });
}
if ($w > 1025) {
    $('.mainMenu > li').unbind().hover(function () {
        $(this).find('.subMenu').stop().slideToggle(400);
    });
} else {
    $('.mainMenu > li').unbind().click(function (e) {
        $(this).find('.subMenu').stop().slideToggle(400);
    });
}

每次调整大小时都要对DOM进行多次更改，这可能代价高昂，而且会降低网站的运行速度。我建议让功能根据浏览器的大小来决定要采取什么行动。

$(document).on('click', 'a[href]', function (e) {
    var width = window.innerWidth || document.documentElement.clientWidth;
    if (width < 1025) {
       e.preventDefault();
    }
});

这只会在视图大小较小（低于1025px）时阻止链接。

$('.mainMenu > li').on('hover click', function () {
    $(this).find('.subMenu').stop().slideToggle(400);
});

您可以同时执行两个绑定。如果你真的需要，你可以把上面的If放在这个块里，但我认为在大多数情况下，你都可以保持原样。

相关文章：