제이쿼리 질문 드립니다(모달 배경 클릭시 클래스 제거)
관련링크
본문
스터디용으로 나이키 사이트를 카피하고 있습니다.
960px 이하에서 작동하는 모바일메뉴를 만들고 있는데,
따로 close 버튼 없이 배경을 클릭하면 들어가게 만들고 싶거든요,,
.slide_menu_wrap에 배경을 주었고 그 안에 .slide_menu가 있는 구조입니다.
이벤트 타겟으로 wrap 클릭, 클릭 대상이 .slide_menu가 아니라면 닫기
이런식으로 짰는데 안되네요..
제 머리론 이 이상 방법이 생각나지 않아서.. 도움주실 분 구합니다.. ㅠ
function slideMenuOpen(){
$('.slide_menu_wrap').addClass('on');
}
$(function(){
$('.slide_menu_wrap.on').on('click', function(e) {
if( e.target != $('.slide_menu') ){
return false;
}else{
$('.slide_menu_wrap').removeClass('on');
}
});
});
답변 3
if( $(e.target) == $('.slide_menu') ){
alert("확인");
return false;
}else{
$('.slide_menu_wrap').removeClass('on');
alert("확인2");
}
이런식으로 정확히 동작하는지 체크하신 후에 removeClass 말고 그냥 display:none 를 해주면 없어지지 않나요?
$('.slide_menu_wrap').css('display', 'none');
다시 살릴때는
$('.slide_menu_wrap').css('display', '');
오 감사합니다! 이걸로 확인해보니까 계속 확인2가 뜨네요 ㅠ
wrap의 자식 요소라서 slide_menu를 클릭해도 계속 wrap을 클릭한걸로 인식하나봐요..
자식선택하는 법을 찾아봐야겠어요 큰 도움 되었네요 감사합니다!
slide_menu를 클릭했을때, slide_wrap을 클릭했을때로 나눠서 작성해주었더니 잘 작동됩니다 감사합니다!!
지식인이면 내공 드리고 싶을 정도로 감사해요 ㅠㅠ
$('.slide_menu').click(function(){
alert("확인");
return false;
});
$('.slide_menu_wrap').click(function(){
$('.slide_menu_wrap').removeClass('on');
alert("확인2");
});
ㅎㅎㅎ 도움이되셨다니 다행이네요 ㅋㅋㅋ
그러면 제 답변을 채택해주시면 될 것 같습니다!^^
채택하였습니다!
그런데 새로운 문제가 발생했어요.. slide_menu 안의 a들이 클릭되지 않는 상태가 되었네요,,
return false 때문이겠죠... 어디부터 잘못된것일까요..ㅋㅋㅋ
$('.slide_menu_wrap').click(function(){
$('.slide_menu').click(function(){
return false;
$('.slide_menu a').click(function(){
event.preventDefault();
});
});
$(this).removeClass('on');
});
이런 식으로 쓰면 무리수일까요?..
해결됐다고 생각했는데 새로운 문제에 직면하니 멘붕이네요...
음 return false; 는 왜있는거죵..?ㅋㅋㅋ
$('.slide_menu_wrap').click(function(){
$('.slide_menu').click(function(){
return false;
$('.slide_menu a').click(function(){
그리고 얘네들이 다 안에 들어갈 필요없이 각각 개별적으로 선언해서 쓰셔야할 것 같아요!
$('.slide_menu_wrap').click(function(){
});
$('.slide_menu').click(function(){
)};
$('.slide_menu a').click(function(){
});
이런식으로..
안그러면 제일 상위 클릭이 안되면 그 안에있는 얘들은 실행조차 안되니까요!
해결되었습니다 감사합니다!!
$('.slide_menu_wrap').click(function(){
$(this).removeClass('on');
});
$('.slide_menu').click(function(){
return false;
});
$('.slide_menu a').click(function(){
event.stopPropagation();
});
e.target != $('.slide_menu')
비교하는 객체가 Element와 jquery 객체라서 다를수밖예 없습니다
$(e.target) != $('.slide_menu')
비교문을 사용하시려면 로 하셔야 됩니다
그 부분 수정해봐도 작동이 안되네요 ㅠ
혹시나 해서 등호 갯수를 바꿔봐도,, $(e.target)을 변수에 담아봐도,,
몇 시간동안 붙잡고 있어요 ㅠ
function(e)는 제가 잘 안써봐서 그런지,,
혹시 다른 좋은 방법이 있을까요?
e.target 이 slide_menu와 같으면 return false;
아니면 removeClass로 해야하는데 바보같이 썼네요,,
하지만 여전히 되지 않고 있습니다 도와주세요 ㅠㅠ
$('.slide_menu_wrap.on').on('click', function(e) {
if( $(e.target) == $('.slide_menu') ){
return false;
}else{
$('.slide_menu_wrap').removeClass('on');
}
});
클릭이벤트 주어를 .slide_menu_wrap.on 으로 하면 아예 클릭이 안되는 것 같고
.slide_menu_wrap 으로 하니까 등호 갯수에 따라 어딜 눌러도 닫히거나, 어딜 눌러도 안닫히거나 하네요,, ㅠ