jquery 오직 조건에서만 실행하는법
본문
$(document).ready(function(){
if($(".gnb_al_li>ul").css('display') == 'none'){
$(".gnb_al_li").click(function(){
$(this).find("ul").slideToggle('fast');
});
}
});
css 에서 .gnb_al_li>ul 이 너비960픽셀 이하에서 display:none 이 되게 설정해놨습니다.
위 스크립트를 위 클래스의 display:none 일때만 실행시키려고 해요.
960픽셀 이하로 설정해놓고 새로고침하면 적용이 잘됩니다.
그리고 다시 창크기를 키워 961픽셀 이상으로 하면 저 조건문이 그대로 적용됩니다.
961픽셀 이상이면 display:block으로 바뀌는데 왜 그대로 적용 될까요..
그리고 961픽셀 이상으로 해놓고 창크기를 줄여서 테스트해보면 저 조건문이 작동을 안합니다.
전에도 비슷한 질문을 했지만 해결이 되지않아 다시 올려보네요
답변 2
당연히.. 지금의 코드는 한번밖에 작동을 안하는구조니깐요
페이지를 불러올때 if문의 조건을 타고 딱 한번 작동하는 코드입니다 지금상태로는
css에서 변경이들어가니깐 당연히 javascript에서는 알수가없지요
알수가있다해도 지금 코드로는 뭔짓을 하든 현재페이지에서는 딱한번만 실행하고 말겁니다
if문 조건을 너비감지로 바꾸셔야 할듯합니다
$(document).ready(function(){
if($(window).width() < 960){
$(".gnb_al_li>ul").hide();
$(".gnb_al_li").click(function(){
$(this).find("ul").slideToggle('fast');
});
}
});
이렇게 해봤는데도 똑같은 증상이 나옵니다
window.addEventListener("resize", function(event) {
if(document.body.clientWidth < 960){
alert('aa');
}
})
이런식으로 하셔야해용
resize 이벤트에 넣어서 해보셨으면 합니다.
$(document).ready() 는 최초 문서로드가 다 된 뒤, 1회 실행되는 성격입니다.
$(window).on('resize', function(){
var win = $(this);
if (win.width() >= 961) {
// 창크기가 961픽셀 이상일 때 실행할 코드
} else {
// 창크기가 961픽셀 미만일 때 실행할 코드
}
});
