jquery - Dropbox 和菜单

Question

我说话可能看起来很傻，但我在使用 Jquery 时遇到了困难。 我的目标是申请。 “隐藏”菜单和“.mes”dropbox，只有当屏幕小于或等于320px(纵向智能手机)时，dropbox才会出现。 问题是当手机处于纵向并且在我更改为横向(480px)时，菜单不会出现并且不会隐藏保管箱。保留保管箱。

我愿意做任何事情来改变屏幕的初始位置。

JSFIDDLE(有问题，但有效):http://jsfiddle.net/eJZSd/

$(document).ready(function () {

    var width = $(window).width();

    if(width<400){
          $("#Menu_Drop").show();
          $("aside").hide();
    }
    else{
          $("#Menu_Drop").hide();
          $("aside").show();
    }

    $('img').on('dragstart', function(event) { event.preventDefault(); });

    $('.flexslider').flexslider({
        animation: 'fade',
        slideshow: true,  
        touch: true,  
        keyboard: true,
        slideshowSpeed: 7000, 
        animationSpeed: 500,
        controlNav: false,
        directionNav: false,  

        before: function(){

        $("#Mensagem").animate({ opacity: '0', });

        $(".triangulo").animate({ opacity: '1', });

        $(".triangulo").animate({ borderWidth: '0px', });

        },

        after: function(){
          if(width<500){
          $(".triangulo").animate({ borderWidth: '10px', });
        }
        else{
          $(".triangulo").animate({ borderWidth: '70px', });
        }


          $("#Mensagem").animate({ opacity: '1', });

        }, 


    });
  });

Answer 1

在我看来，您遇到的问题是您没有检测到“窗口”大小何时因屏幕旋转而发生变化。

根据 this response ，诀窍是为 resize 或 orientationchange 添加一个事件监听器。然后您将再次运行 400 支票。

将此部分添加到您的 $(document).ready(){...} 部分

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;

        // orientation changed, do your magic here
        var width = $(window).width();

        if(width<400){
              $("#Menu_Drop").show();
              $("aside").hide();
        }
        else{
              $("#Menu_Drop").hide();
              $("aside").show();
        }
    }
};

然后这部分在 $(document).ready(){...}

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);