Question

我正在尝试创建一个标题，用于调整其内容，因为用户使窗口变小，最终变为仅低于850px的菜单图标。问题是标头始终是使用我当前的Jquery代码在页面上加载的最后一件事。有什么想法吗？

   $( window ).bind("resize load",function() {
    if($(window).width()>1050){
      $('.three-head').show();
      $('.two-head').css("margin-right","90px");
      $('#header').show();
      $('.big-head').show();
      $('.small-head').hide();
    }
else if($(window).width()<1050 && $(window).width()>850){
    $('.two-head').css("margin-right","30px");
    $('#header').show();
    $('.big-head').show();
    $('.small-head').hide();
    $('.three-head').hide();
    $('.four-head').show();
    $('.five-head').show();
}
else if($(window).width()<850){
    $('.small-head').show();
}
});

Answer 1

将此代码放入

    $(document).ready(function(){$(document).ready(function(){
});

并删除

 $( window ).bind("resize load",function()

在窗口加载后加载

Answer 2

我会尝试一个动态函数.resize（），它会升级到你的窗口。

$(document).ready(function() {
    $(window).resize(function() {
        if($(window).width()>1050){
            $('.three-head').show();
            $('.two-head').css("margin-right","90px");
            $('#header').show();
            $('.big-head').show();
            $('.small-head').hide();
        } else if($(window).width()<1050 && $(window).width()>850){
            $('.two-head').css("margin-right","30px");
            $('#header').show();
            $('.big-head').show();
            $('.small-head').hide();
            $('.three-head').hide();
            $('.four-head').show();
            $('.five-head').show();
        }
    });
});

你也可以实现一个onLoad函数：

$('#header').load(function () {

    YOUR CODE HERE

)}

希望这有帮助

使用Jquery创建动态标头

2 个答案: