화면 너비가 500px 미만인 경우 Jquery가 실행됩니다.

Question

클릭하면 내용을 나타내는이 코드가 있습니다. 이 기능은 화면/장치 너비가 최대 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"); 
    }); 
}); 

UPDATE : 는 내가 달성하기 위해 원하는 것을 설명하는 좋은 일을하지 않았다/나는 화면 폭이 500 픽셀 이상인 경우이 이미지를 표시 할. 너비가 500px보다 작 으면 여기를 클릭하여 이미지를 표시하고 이미지를 표시 할 라인을 원합니다.

Answer 1

추적 screen.width 및 screen.height을 시도하십시오. 이 같은

뭔가 :

먼저 화면 폭을 얻을 필요가 화면 폭이 일정 폭 이상이면 문 다음, 위에서 게시 된 코드를 실행하는 경우 다음 사용 수

function doSomething(){ 
     if (screen.width < 500){ 
      //Do Something 
     } 
    } 

Answer 2

.

예를 들면.

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... 
} 

Answer 3

창의 크기가 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"; 
      }); 
     }); 
    } 
}); 

Answer 4

당신은 또한 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/