2

クリックするとコンテンツを表示するこのコードがあります。問題は、この機能は、画面/デバイスの幅が最大 500px の場合にのみ使用できるということです。どうすればこれを行うことができますか？

$(function () {
    $('.row1').hide();
    $('#show').toggle(function () {
        $('.row1').slideDown("slow");
        $(this).attr("src", "bilder/cancel.png");
    }, function () {
        $('.row1').slideUp("slow");
        $(this).attr("src", "bilder/add.png");
    });
});

更新: 私が達成したいことをうまく説明できませんでした: / II は、画面の幅が 500px を超えるときにこの画像を表示したいと考えています。幅が500px未満の場合、ここをクリックして画像を表示すると画像が表示されるという行が必要です

4

4 に答える 4

5

最初に画面の幅を取得する必要があります。次に、画面の幅が特定の幅を超えている場合は、if ステートメントを使用して上記のコードを実行できます。

例えば。

if($(window).width() > 500){
   $('.row1').hide();
   $('#show').toggle(function(){
      $('.row1').slideDown("slow");
      $(this).attr("src","bilder/cancel.png" );
   },function(){
      $('.row1').slideUp("slow");
      $(this).attr("src", "bilder/add.png" );
   });
};

編集

コメントを見て、画像を表示したい場合は非表示にします。css メディア クエリを使用する方がより適切で簡単であることにおそらく同意しますが、JS ソリューションを示す以下の編集を参照してください。

if($(window).width() > 500){
   //show the image
   $('.row1').slideDown("slow");
   //etc...   
}else{
   //hide the image
   $('.row1').slideUp("slow");
   //etc...
}
于 2013-03-18T17:30:43.867 に答える
2

追跡screen.widthしてみてくださいscreen.height。

このようなもの：

    function doSomething(){
        if (screen.width < 500){
            //Do Something
       }
    }
于 2013-03-18T17:30:23.307 に答える
2

ウィンドウのサイズが 500 未満の場合は、イベントをバインドするか、ハンドラーで if ステートメントを使用できます。toggleイベント メソッドは推奨されないことに注意してくださいslideToggle。代わりにメソッドを使用できます。

$(function () {
    var $row = $('.row1').hide();
    $('#show').click(function () {
        if ($(window).width() > 500) return;
        $row.stop().slideToggle("slow");
        $(this).prop("src", function(i, src){
            return src === "bilder/cancel.png" 
                   ? "bilder/add.png" 
                   : "bilder/cancel.png";
        });
    });
});

または：

$(function () {
    if ($(window).width() > 500) {
       var $row = $('.row1').hide();
       $('#show').click(function () {
           $row.stop().slideToggle("slow");
           $(this).prop("src", function(i, src){
                return src === "bilder/cancel.png" 
                       ? "bilder/add.png" 
                       : "bilder/cancel.png";
           });
       });
    }
});
于 2013-03-18T17:31:22.590 に答える
1

resize関数をイベントにバインドすることもできます。これにより、ブラウザ ウィンドウのサイズが変更されるたびに関数が呼び出されます。

function myFunction() {
    if($(window).width() > 500)
    {   
        //Code to run when greater than...
    }
    else
    {
        //Code to run when less than...
    }
}

//initialize
myFunction();

//call when the page resizes.
$(window).resize(function() {
    myFunction();
});

ここで実際の視覚的な例を見ることができます: http://jsfiddle.net/q6BpH/1/

于 2013-03-18T18:00:41.297 に答える