화면의 아무 곳이나 클릭하는 법 jQuery 토글() 기능에 의해 제어되는 모바일 메뉴를 닫으시겠습니까?

내 모바일 메뉴가 jQuery toggle() 함수로 열리거나 닫힙니다. 그것을 여는 데 사용 된 것과 동일한 햄버거 아이콘을 다시 클릭하여 닫을 수있는 기능 외에도 열려있는 동안 화면의 아무 곳이나 클릭하여 닫을 수있는 기능이 필요합니다. 그러나 화면의 아무 곳이나 클릭하면 다음과 같은 방식으로 toggle() 기능이 "방해"됩니다. 일단 메뉴가 열리면 화면의 아무 곳이나 클릭하여 닫은 다음 모바일 메뉴 아이콘을 다시 열면 두 번째에만 작동합니다 나는 그것을 클릭한다. (왜냐하면 toggle() 함수는 화면을 클릭함으로써 메뉴를 닫았다는 것을 "알지 못했다").화면의 아무 곳이나 클릭하는 법 jQuery 토글() 기능에 의해 제어되는 모바일 메뉴를 닫으시겠습니까?

이 문제를 해결하는 방법은 무엇입니까?

JS :

$('.header__menu_icon').toggle(function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_opening'); 
}, function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_closing'); 
}); 
$(document).click(function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_closing'); 
}); 
$('.mobile_menu').click(function(event) { 
    event.stopPropagation(); 
});

HTML :

<body> 
<div class='wrap'> 
    <div class='header'> 
    <div class='mobile_menu'> 
     ... 
    </div> 
    </div> 
</div> 
</body>

CSS :

@keyframes mobile_menu_opening { 
    0% { transform: translateX(0px); } 
    100% { transform: translateX(-280px); } 
} 
@keyframes mobile_menu_closing { 
    0% { transform: translateX(-280px); } 
    100% { transform: translateX(0px); } 
} 
.mobile_menu_opening { 
    animation-name: mobile_menu_opening; 
    animation-duration: 2s; 
} 
.mobile_menu_closing { 
    animation-name: mobile_menu_closing; 
    animation-duration: 1s; 
} 
.wrap { 
    position: relative; 
}

출처

2016-07-05 drake035

내가 달성 할 단순히 토글 기능을 피함으로써.

function menuToggle() { 
    var openClass = 'mobile_menu_opening'; 
    var closedClass = 'mobile_menu_closing'; 
    var $wrap = $('.wrap'); 
    if ($wrap.hasClass(openClass)) { 
    $wrap.removeClass(openClass); 
    $wrap.addClass(closedClass); 
    } else { 
    $wrap.removeClass(closedClass); 
    $wrap.addClass(openClass); 
    } 
} 

$('.header__menu_icon').on('click', function() { 
    menuToggle(); 
}); 

$(document).on('click', function() { 
    menuToggle(); 
}); 

$('.mobile_menu').on('click', function(event) { 
    event.stopPropagation(); 
});

출처

2016-07-05 18:41:25 Mila

감사를 지정하지를 사용 : 게다가, 당신의 코드는 다음과 같은 방법을 최적화 할 수 있습니다. 코드를 사용하면 메뉴가 열리고 즉시 닫힙니다. – drake035

코드를 어딘가에 두어 구현의 문제점을 확인할 수 있습니까? 그것은 잘 작동해야합니다 – Mila

이

$("body:not(.mobile_menu)").click(function() { 
    $("").removeClass(""); 
    - or - 
    $("").toggle(""); 
});

출처

2016-07-05 18:44:53 Lowkase

"- 또는 -"논리의 관점에서 무엇을 의미하는지 모르겠습니다 – drake035

화면의 아무 곳이나 클릭하는 법 jQuery 토글() 기능에 의해 제어되는 모바일 메뉴를 닫으시겠습니까?

답변

관련 문제