dom 구조에서 벗어나는법 (?)

Question

메뉴를 클릭하면 열리고 닫히는 아코디언 메뉴를 만들었습니다.

메뉴 말고 다른곳(그니깐 메뉴부분을 제외한 body영역) 을 클릭해도 메뉴가 닫히게 하려면 어떻게 해야하나요??

body에다가 slideUp을 주면 열리자마자 닫히는데, 왜 이런가 생각해보니 dom 구조상 메뉴가 바디 하위에 있기 때문에 바디를 클릭하는 순간 메뉴도 클릭되는걸로 인지해서 인걸로 판단했습니다.

 

if문으로 만들어야 겠다는 생각은 들었는데 선택자를 사용해서 별거 다해봐도, dom구조상 제가 생각한 로직은 전부다 안되더군요.

 

그렇다면 메뉴만 제외하고 이벤트를 줘야하는걸로 생각이 들었는데 이것의 방법을 모르겠습니다.

 

https://jsfiddle.net/jongmin/qaua6L14/

Answer 1

다음 두 가지 방법으로 해결을 할 수 있습니다.

1. 이벤트 버블링으로 인한 body 이벤트 동작시 직접 메뉴에서 클릭하지 않는 경우에만 선택적으로 조건에 따라 슬라이드 올림 처리를 한다.

/*
 * 해당 메뉴 클릭시 body에 이벤트가 버블링되므로 body에서 다음과 같은 처리가 필요
 */
$("body").click(function(event) {
    var $target = $("#link1"); // 이벤트가 최초 발생한 대상을 검사하기 위한 기준대상 준비
    // 버블링되어 오는 이벤트 객체에서 $target을 포함하고 있는지에 대한 검사를 하며 해당 되지 않는 경우에만 슬라이드 올림 처리
    if (!$target.is(event.target) && $target.has(event.target).length === 0) {
        if(toggle_menu) {
            $(".submenu").slideUp(300);
            toggle_menu=!toggle_menu
        }
    }
});

2. 이벤트 버블링을 막는 방법으로 처리한다. jQuery에서는 핸들러에서 코드 수행후 false를 반환하면 이벤트 버블링을 중지한다.

$('#link1').click(function(event) {
    // 기존 코드

    // false를 반환한다.
    return false;
}


$("body").click(function(event) {
    if (toggle_menu) {
	    $(".submenu").slideUp(300);
	    toggle_menu = !toggle_menu
	}
});