Jquery hide()/show() on window width

이것이 특정 윈도우 너비에서 코드를 실행하는 올바른 방법인지 알려주십시오.Jquery hide()/show() on window width

$(window).resize(function(){ 
var width = $(window).width(); 
if(width <= 780){ 
    jQuery(".answers").hide(); 
    jQuery(".container h4").click(function(){ 
    jQuery(this).next(".answers").siblings(".answers:visible").slideToggle(); 
    jQuery(this).next(".answers").slideToggle(); 
    }); 
} 

else{ 
    jQuery(".answers").show(); 
} 
})

너비가 700px보다 크면 질문을 클릭하십시오. 모든 것이 계속 흔들립니다. Jsfiddle 링크를 조언하십시오. https://jsfiddle.net/bw6k874b/28/

출처

2017-04-19 The Naga Tanker

당신은 JS를 통해 그것을해야합니까? 왜 CSS를 통해 그것을하지 않습니까? 성능면에서 더 나은 방법. 흔들리는 것은 요소가 처음에는 숨겨져 있고 창 크기가 조정될 때마다 발생합니다. 너비가 780px보다 크면 표시됩니다. –

다음은 흔들림없는 도움말입니다. https://jsfiddle.net/e4g4a4m2/ – Mazz

사용자가 다른 div를 클릭하면 대답 div가 필요하기 때문에 Js를 통해 수행하고 있습니다. –

.answers이 이미 숨겨져 있다면 jQuery(".answers").is(':hidden')으로 확인하면됩니다. 여기

$(window).resize(function() { 
var width = $(window).width(); 
if (width <= 780) { 
    if (jQuery(".answers").is(':hidden')) return; // This is the fix 
    jQuery(".answers").hide(); 
    jQuery(".container h4").click(function() { 
     jQuery(this).next(".answers").siblings(".answers:visible").slideToggle(); 
     jQuery(this).next(".answers").slideToggle(); 
    }); 
} else { 
    jQuery(".answers").show(); 
} 
})

는 흔들림없이 당신을 수 있습니다 : https://jsfiddle.net/e4g4a4m2

출처

2017-04-19 08:40:06 Mazz

Jquery hide()/show() on window width

답변

관련 문제