закрыть меню onbody click и aimate body

Question

Я просил об этом раньше, но все ответы не работают, поэтому у меня есть примерная страница, webpage. У меня есть меню, которое изменяет размеры, я хочу закрыть меню, когда один клик за пределами меню, а также для тела, чтобы анимировать вниз, когда выпадающее меню сначала переключается, чтобы выпадающее меню не скрывало никакого содержимого.

jQuery(document).ready(function($) { 
 
    //open-close submenu on mobile 
 
    $('.cd-main-nav').on('click', function(event) { 
 
    $(this).children('ul').toggleClass('is-visible0'); 
 
    }); 
 
});

/*when the drop down is toggled*/ 
 

 
.cd-main-nav ul.is-visible0 { 
 
    -webkit-transform: translateY(70px); 
 
    -moz-transform: translateY(70px); 
 
    -ms-transform: translateY(70px); 
 
    -o-transform: translateY(70px); 
 
    transform: translateY(70px); 
 
}

<nav class="cd-main-nav"> 
 
    <ul> 
 
    <li><a href="../index.html">Home</a></li> 
 
    <li class="current2"><a href="mon.html">Mon</a></li> 
 
    <li><a href="tue.html">Tue</a></li> 
 
    <li><a href="wed.html">Wed</a></li> 
 
    </ul> 
 
</nav>

Answer 1

нашел код.

jQuery(document).ready(function($) { 
 
    //open-close submenu on mobile 
 
    $('.cd-main-nav').on('click', function(event) { 
 
    $(this).children('ul').toggleClass('is-visible0'); 
 
    }); 
 
}); 
 

 

 
window.addEventListener('mouseup', function(event) { 
 
    var box = document.getElementById('menu-c'); 
 
    if (event.target != box && event.target.parentNode != box) { 
 
    $('.cd-main-nav').children('ul').removeClass('is-visible0'); 
 
    } 
 
}); 
 

 
//id="menu-c" on cd-main-nav

Answer 2

Просто прикрепить событие щелчка к телу и отдельное событие щелчка к окну, отрицающих первое событие щелчка.

$('html').click(function() { 
//Hide the menu 
}); 

$('.slideout-menu').click(function(event){ 
    event.stopPropagation(); 
}); 

Предупреждение: если вы используете этот метод, имейте в виду the dangers of stopping propagation.