1

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

我会做任何事情来改变独立屏幕的初始位置。

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', });

        }, 


    });
  });
4

1 回答 1

1

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

根据这个响应，诀窍是为resizeor添加一个事件侦听器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);
于 2013-06-07T01:29:30.160 回答