1

このコードは、ロード時のブラウザのサイズに基づいてのみ機能します。現在のブラウザサイズを取得し、その現在の情報に基づいて機能するように実装できるかどうか疑問に思っています。

ラップしてみましresize()たが、トグルが連続してオン/オフになる、または縮小したブラウザにロードするとまったく機能しないなど、奇妙な動作が発生します。

フッターメニューが大画面では静的リンクであるが、小画面ではドロップメニューに変わるレスポンシブサイト。

    var myWidth = 0, myHeight = 0;

    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }   

    if(myWidth < 980) {
        $("#footer h3").click(function () {
                $(this).toggleClass("active");
                $(this).parent().find("ul").slideToggle('medium');      
        });
    }
4

3 に答える 3

1

代わりにcssメディアクエリを使用する必要があります。

@media only screen and (max-device-width: 980px) {
   // css goes here...   
}

または、条件付きスタイルシートを含める：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

これはレスポンシブデザインを使わない素晴らしい記事です

于 2013-02-04T16:56:17.960 に答える
1 
var myWidth = 0, myHeight = 0;


function getSize(){

    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }

}

getSize(); // run first time

$(window).resize(function(){
  getSize(); // do it on resize
});


$("#footer h3").click(function () {

        getSize();  // not needed but good to have

        if(myWidth < 980) {
            $(this).toggleClass("active");
            $(this).parent().find("ul").slideToggle('medium');
        }

});
于 2013-02-04T16:57:02.100 に答える
0

次のようなものを試してください。

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) uniqueId = "Don't call this twice";
        if (timers[uniqueId]) clearTimeout (timers[uniqueId]);
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

$(window).resize(function(){
    waitForFinalEvent(function(){
        // put all your code here 
    }, 20, "resize"); // replace 20 with every milliseconds to execute during
                      // resize
})

そこに入力したコードは、ウィンドウのサイズが変更されるたびに実行さresize()れます。サイズを変更するときに必ずしもチェックされるとは限らないため、単に使用しても常に機能するとは限りません。

于 2013-02-04T16:55:41.383 に答える