javascript - 滑动关闭汉堡菜单
问题描述
所以我不太了解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="static\img\christopher-campbell-28567-unsplash.png" alt="">
</div>
<div class="menu-div">
<nav>
<h5 class="burger-logo">LOGO</h5>
<ul class="nav-links">
<li><img src="static\img\home.png" alt="">HOME</li>
<li><img src="static\img\discover.png" alt=""></i>DISCOVERY</li>
<li><img src="static\img\photos.png" alt="">PHOTOS</li>
<li><img src="static\img\mail.png" alt="">CONTACT</li>
<li><img src="static\img\christopher-campbell-28567-unsplash.png" alt="">PROFILE</li>
</ul>
</nav>
解决方案
您需要使用jQueryUI 滑动事件(或任何其他为您简化该事件的库)
然后
$(window).on('click swipe', '.burger-icon ul', function () {
$(this).toggleClass("nav-active toggle");
});
这是普通的 JS 滑动事件
推荐阅读
- android - 从另一个 Activity (Kotlin) 将项目添加到 RecyclerView
- java - 如何使用 JBotsim 库实现领导选举的分布式算法
- python-3.x - 即使我在每个循环的开头搜索元素,for 循环中的陈旧元素
- javascript - 发送帖子时它返回:流意外结束
- c++ - SystemParametersInfo 将背景设置为纯色而不是实际设置图片
- html - 应用于一张桌子的 CSS 不适用于另一张桌子
- python - PySpark:无法创建小型数据框
- google-apps-script - Add cell copy to existing function
- javascript - 即使我试图保持它,Textarea也会失去焦点
- microsoft-cognitive - Azure 认知服务容器与云之间的任何模型质量差异