제이쿼리 질문 드립니다(모달 배경 클릭시 클래스 제거)

제이쿼리 질문 드립니다(모달 배경 클릭시 클래스 제거)

QA

제이쿼리 질문 드립니다(모달 배경 클릭시 클래스 제거)

본문

3551634313_1657173022.9103.png

 

스터디용으로 나이키 사이트를 카피하고 있습니다.

 

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(){
});
이런식으로..
안그러면 제일 상위 클릭이 안되면 그 안에있는 얘들은 실행조차 안되니까요!

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');
            }
        });
 
답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT