Question

＆＃34;标题＆＃34;我的网站中的元素 - 通过css中的媒体查询 - 当浏览器窗口小于500px时，得到“left：-100％”。同时出现“显示菜单”按钮。点击时会发生这种情况：

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

然后“标题”从左侧进入，并带有平滑的动画。 “显示菜单”按钮也被删除，并出现“隐藏菜单”按钮。点击时会发生这种情况：

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

这会推动＆＃34;标题＆＃34;通过直接更改HTML来向左：

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

这是我的问题。

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

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

我也试过没有运气：

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

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

有人可以帮忙吗？谢谢。

Answer 1

每当调整浏览器窗口大小时，您都需要触发事件...所以，不要将代码放在文档中，而应将代码放入windows resize函数中

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

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

    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 ... 
            }); 
    });

希望这会有所帮助......

Answer 2

尝试在2个不同的css类中拆分2种不同的样式。当浏览器是> 500然后你添加或删除级联样式

（p.s。你需要在窗口调整大小时触发你的事件！）

无法删除样式

2 个答案: