3

私は流動的なグリッドレイアウトを持っています。いくつかの列 (それほど必要ではありません - Twitter の更新など) は、解像度が小さい場合は「非表示」、見出しをクリックすると「表示」する必要があります。

これが私がこれまでに持っているものです：

HTML

<div id="wrapper">

    <div class="toggle">
         <h2>Heading</h2>
         This content is visible always
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

</div>

Jクエリ

// D E F I N E   T H E   F U N C T I O N

function ToggleSmall () {
     // CONDITIONALS
    // Clickable heading
    var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
    // Content to toggle
    var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
    // FUNCTION
    // Content to toggle - hide it to be shown on click
    $(ToggleSmallCol).addClass('none');
    // Toggle function
    $(ToggleSmallVar).click(function () {
        // Find col to toggle
        var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col'); 
                    // Toggle the DIV
        $(ToggleSmallColTarget).slideToggle('slow');
    });
}

// C A L L   T H E   F U N C T I O N

$(document).ready(function () {
if ($(window).width() < 681) {
    ToggleSmall();
}
});

ロード時に動作しますが、ウィンドウのサイズ変更でも「レスポンシブ」に動作するようにしています。681 より小さい解像度で ToggleSmall() 関数を実行し、大きい解像度で停止します。

「サイズ変更」イベントで関数をバインドしようとしました (例: resize のメディア クエリとしての jQuery ) が、何らかの理由で「トグル」が 3 ～ 4 回実行されます (ドキュメントは複数回「準備完了」ですか?)。

主に変数を定義するために、他のソリューションをいくつか見つけましたが、これまでのところ機能していません。私はjQueryの初心者でもあるので、何かを見逃しているかもしれません。：） 何か案は？

4

2 に答える 2

4

javascript の動作と処理を調整するために、「タイマー」イベント リスナーを使用することが提案されています。

Curt Howardの例からコピーして貼り付けます:

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(function() {
    var pause = 100;
    // will only process code within delay(function() { ... }) every 100ms.

    $(window).resize(function() {
        delay(function() {
            var width = $(window).width();
            if( width >= 768 && width <= 959 ) {
                // code for tablet view
            } else if( width >= 480 && width <= 767 ) {
                // code for mobile landscape
            } else if( width <= 479 ) {
                // code for mobile portrait
            }
        }, pause );
    });

    $(window).resize();
});
于 2013-06-21T15:31:09.060 に答える
3

この関数$(window).resize(function() {});を使用している場合は、document.ready 内に配置する必要はありません。とにかく縮小すると、隠れた部分のアニメーションが実際には見えないため、代わりに CSS を操作してみます。

これがjsです。

$(window).resize(function() {
var pageWidth = $(window).width(); 

    if( $(window).width()< 681){

        //call my function
        //myfunction();

    $('#styleSmaller').attr('href','../css/siteSMALLER.css');
    }
    });

そして、あなたはあなたのリンクを持っています<head>

        <link type="text/css" rel="stylesheet" href="" id="styleSmaller"/>
于 2013-02-12T00:42:20.047 に答える