Как сделать такое на js
Подскажите как сделать, есть выдвижное меню, оно закрывается если кликнуть вне меню на фон, собственно как сделать что бы оно также закрывалось если нажать на саму ссылку в меню, нажал на ссылку и оно также сразу скрылось, мб кто разбирается в js и скажет, заранее спасибо
Меню:
<nav>
<div class="drawer">
<div class="nav-head">
<div class="head-cont">
<img class="avatar" src="/img/avatar.png">
<div class="tit">
<span class="name"><b>XAOTIK</b></span>
Material Design
</div>
</div>
</div>
<div class="nav-cont">
<a class="nav-link" href="/"><span class="material-icons">home</span> Главная</a>
<a class="nav-link" href=""><span class="material-icons">person</span> Профиль</a>
<a class="nav-link" href=""><span class="material-icons">rss_feed</span> Новости</a>
<a class="nav-link" href=""><span class="material-icons">notifications</span> Уведомления</a>
<a class="nav-link" href=""><span class="material-icons">chat_bubble</span> Сообщения</a>
<a class="nav-link" href=""><span class="material-icons">group</span> Друзья</a>
<a class="nav-link" href=""><span class="material-icons">logout</span> Выход</a>
</div>
</div>
</nav>
JS
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function cl(el) {
return document.getElementsByClassName(el);
}
function Drawer() {
var drawers = cl('drawer');
var drawers_cover = cl('drawer_cover');
if (drawers.length > 0) {
var drawerCover = document.createElement("div");
drawerCover.className = 'drawer_cover';
document.body.appendChild(drawerCover);
cl('nav_main')[0].onclick = function() {
drawers[0].classList.toggle('drawer_in');
drawers_cover[0].classList.toggle('drawer_op');
};
cl('drawer_cover')[0].onclick = function() {
drawers[0].classList.toggle('drawer_in');
drawers_cover[0].classList.toggle('drawer_op');
};
}
}
Drawer();
jQuery(document).ready(function(e) {
var d = e(".hide"),
s = e(".cd-secondary-nav"),
a = e(".sub-nav-hero"),
i = (d.height(), !1),
n = 0,
o = 10,
l = 150;
function r() {
var r, t, h, v = e(window).scrollTop();
a.length > 0 ? (
t = v,
h = a.offset().top - s.height() - d.height(),
n >= t ? t < h ? (
d.removeClass("hidden"),
s.removeClass("fixed slide-up"),
a.removeClass("secondary-nav-fixed")
): n - t > o && (
d.removeClass("is-hidden"),
s.removeClass("slide-up").addClass("fixed"),
a.addClass("secondary-nav-fixed")
): t > h + l ? (
d.addClass("hidden"),
s.addClass("fixed slide-up"),
a.addClass("secondary-nav-fixed")
): t > h && (
d.removeClass("hidden"),
s.addClass("fixed").removeClass("slide-up"),
a.addClass("secondary-nav-fixed")
)
): n - (r = v) > o ? d.removeClass("hidden"): r - n > o && r > l && d.addClass("hidden"),
n = v,
i = !1
}
e(window).on("scroll", function() {
i || (i = !0,
window.requestAnimationFrame ? requestAnimationFrame(r): setTimeout(r, 250))
}),
e(window).on("resize", function() {
d.height()
})
});