Question

我试图仅在移动视图上使用.titleClickHide和.titleClick类。它们将无法在大视图上使用。我应该更改或添加什么代码？

 $(window).resize(function () {
        console.log('screen changed');

        if (screen.width > 760) {
            $('#footerMenu').find('.li').removeClass("titleClickHide").removeClass('titleClick');
        }
        else {
            $(".footerMenuTitle .li").first().addClass("titleClick");
            $('.titleClick').click(function () {
                if ($(this).parents('ul').find('li.show').length > 1) {
                    $('.titleClickHide').hide().removeClass('show');
                } else {
                    $('.titleClickHide').hide().removeClass('show');
                    $(this).parents('ul').find('li').show().addClass('show');
                }
            });
        }
    });

Answer 1

首先，将点击功能从调整大小功能中移除。

第二，如果要使用removeClass（）方法删除多个类，请将它们合并为

$（“ .class或#id”）.removeClass（“ myClass yourClass”）

请参阅https://api.jquery.com/removeclass/

$(window).resize(function () {
    console.log('screen changed');
    if (screen.width > 760) {
        $('#footerMenu').find('.li').removeClass("titleClickHide titleClick");
    } else {
        $(".footerMenuTitle .li").first().addClass("titleClick");
    }
    });

$('.titleClick').click(function () {
    if ($(this).parents('ul').find('li.show').length > 1) {
        $('.titleClickHide').hide().removeClass('show');
    } else {
        $('.titleClickHide').hide().removeClass('show');
        $(this).parents('ul').find('li').show().addClass('show');
    }
});

进行更改后，请检查控制台，查看是否存在任何错误以及测试时还会看到什么。

强烈建议使用CSS @media而不是resize（）方法。 Resize（）会在调整大小时降低网站性能，原因是该功能在每个像素变化时都会触发。例如，将宽度从768px减小到500px，该函数将触发268次。

如何在调整屏幕大小时添加/删除类

1 个答案: