jquery - 无法删除样式

Question

我网站中的“header”元素 - 通过 css 中的媒体查询 - 当浏览器窗口小于 500px 时，得到“left: -100%”。同时出现“显示菜单”按钮。单击时会发生以下情况:

$('.showMenu').click(function(){
    $('header').animate({left: 0}, 'fast,swing');
});

然后“标题”从左侧进入，并带有流畅的动画。 “显示菜单”按钮也被删除，并出现“隐藏菜单”按钮。单击时会发生以下情况:

$('.hideMenu').click(function(){
    $('header').animate({left: "-100%"}, 'fast,swing');
});

这通过直接更改 HTML 将“标题”推到左侧:

<header style="left: -100%;">

我的问题来了。

如果浏览器窗口大于 500px，我希望标题返回到其原始样式，即“left: 0”。下面的 jquery 应该可以工作，但它不会覆盖“header”刚刚获得的新样式:

$(document).ready(function(){
    if($(window).width() > 500) {
        $('header').css({left: 0});
    }
});

我也尝试过，但没有成功:

$(document).ready(function(){
    if($(window).width() > 500) {
        $('header').removeAttr( 'style' );
    }
});

如果我只使用浏览器大小，我没有问题。但是，如果我单击按钮隐藏菜单并且“标题”获取新样式，我似乎无法覆盖它并使菜单再次出现。

有人可以帮忙吗？谢谢。

Answer 1

每当调整浏览器窗口大小时，您都需要触发该事件...因此，您应该将代码放入窗口调整大小函数中，而不是将代码放入准备好的文档中

  $(window).resize(function(){ 
     if($(window).width() > 500) {
            $('header').css({left: 0});
        }
    // and whatever stuffs you want to do ... 
    });

而且您可能想在第一次加载页面时第一次检查窗口宽度。因此，您还需要在调整大小函数之外添加条件。完整的代码是

    function headerEvents(){
     if($(window).width() > 500) {
                    $('header').css({left: 0});
                }
    }



   $(document).ready(function(){
    headerEvents();
     $(window).resize(function(){ 
             headerEvents();         
            // and whatever stuffs you want to do ... 
            }); 
    });

希望这有帮助......