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