滑动关闭汉堡菜单

Question

所以我真的不太了解javascript，我有一个项目的最后期限，我已经做了一个打开点击，但我需要它关闭当你滑动它。所以如果有人知道，请告诉我该怎么做，不要开始解释，因为我没有时间，我真的很紧张

function navSlide() {
const burger = document.querySelector(".burger-icon ul");
const nav = document.querySelector(".menu-div");


burger.addEventListener("click",() => {
//Toggle Nav
nav.classList.toggle("nav-active");


//Burger Animation
burger.classList.toggle("toggle");
});

}

navSlide();

.menu-div{
position:absolute;
left:0px;
width:287px;
top:0px;
background-color:var(--headercolor);
height:812px;
font-size:11px;
font-weight: bold;
transform:translateX(-100%);
transition:transform 0.5s ease-in;
.nav-active{
transform: translateX(0%);
}

<div class="burger-icon">
<ul> 
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
</ul>
</div>

<h5 class="logo">LOGO</h5>
<div class="user-photo">
<img src="staticimgchristopher-campbell-28567-unsplash.png" alt="">
</div>
<div class="menu-div">
<nav>
<h5 class="burger-logo">LOGO</h5>
<ul class="nav-links">
<li><img src="staticimghome.png" alt="">HOME</li>
<li><img src="staticimgdiscover.png" alt=""></i>DISCOVERY</li>
<li><img src="staticimgphotos.png" alt="">PHOTOS</li>
<li><img src="staticimgmail.png" alt="">CONTACT</li>
<li><img src="staticimgchristopher-campbell-28567-unsplash.png" alt="">PROFILE</li>
</ul>
</nav>

Answer 1

您需要使用jQueryUI swipe event(或任何其他为您简化的库)

然后

$(window).on('click swipe', '.burger-icon ul', function () {
$(this).toggleClass("nav-active toggle");
});

---

这是一个普通的JS滑动事件