제이쿼리 무슨 문제인지 모르겠어요
본문
var wid = $(window).width()+17;
$(window).resize(function () {
wid = $(window).width()+17;
if(wid > 1200){
$('.main_nav').show();
$('.drop').hide();
}else{
$('.main_nav, .x').hide();
$('.toggle').show();
$('.drop').hide();
};
}).trigger('resize');
function setIt(){
if(wid > 1200){
//네비 드롭다운
$('.main_nav, .drop').hover(function () {
$('.drop').stop(true,false).slideDown(500);
}, function () {
$('.drop').stop(true, false).slideUp(500);
});
}else{
//토글네비 드롭다운
$('.toggle').click(function () {
$('.main_nav').stop(true, false).slideDown(500);
$('.x').show();
$('.toggle').hide();
});
$('.x').click(function () {
$('.main_nav').stop(true, false).slideUp(500);
$('.toggle').show();
$('.x').hide();
});
};
};
setIt();
리사이즈 안에 있는 if 문은 작동이 잘 됩니다.
그런데 호버하고 클릭이벤트 부분은
호버가 되면 클릭이 안되고(이용자가 창너비를 바꾸고 다시 사용한다고 가정했을때)
새로고침 해서 클릭이 되면 호버가 안되요 ㅠㅠ
호버하고 클릭을 리자이즈 안에 넣으면 css가 망가지고
섞여서 작동이 되요
고수님들 도와주세요...ㅠㅠ
답변 1
1번 라인에서
var wid = $(window).width()+17; 를 지정해버리고 나면 브라우저 크기가 바뀌어도 wid의 값은 변동되지 않습니다. 차라리 var wid=function(){ return $(window).width()+17;} 같이 하셔서
wid()를 값으로 활용하시는게 낫습니다.
그리고 이벤트를 저런식으로 부여할게 아니라, 엘리먼트에 이벤트를 모두 부여하고, 그 안에서 조건식으로 작동여부를 결정하는게 좋습니다. 현재와 같은 구조라면, 처음 브라우저 크기에 맞춰서 이벤트를 부여하고, 그 이후에는 이벤트를 부여하지 않기 때문에, 브라우저 크기가 변동된다고 새로 이벤트를 부여하지는 않기 떄문입니다.
"엘리먼트에 이벤트를 모두 부여하고, 그 안에서 조건식으로 작동여부를 결정하는게 좋습니다." 제가 멍청해서 이 말이 무슨 뜻인지 모르겠어요....ㅠㅠ
setIt() 안에 넣지마시고, if(wid 조건식 안에도 넣지 마시고 그냥 이벤트를 넣으라는 말입니당.
우와 드디어 해결 했어요!!!정말 감사합니다!!!
답변을 작성하시기 전에 로그인 해주세요.
