1

私が話すのはばかげているように思えるかもしれませんが、私は Jquery で問題を抱えています。私の目標は応募することです。メニューと「.Mes」ドロップボックスで「非表示」にすると、ドロップボックスは画面が 320px 以下 (縦長のスマートフォン) の場合にのみ表示されます。問題は、電話が縦向きで横向き (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', });

        }, 


    });
  });
4

1 に答える 1

1

あなたが抱えている問題は、画面の回転によって「ウィンドウ」のサイズがいつ変化するかを検出していないことです。

この応答によると、秘訣は または のいずれ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);
于 2013-06-07T01:29:30.160 に答える