滑动关闭汉堡菜单

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="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>

Answer 1

您需要使用 jQueryUI swipe 事件（或任何其他为您简化事件的库）

然后

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

This 是普通的 JS 滑动事件

滑动关闭汉堡菜单

Closing burger-menu with a swipe

html

javascript

css

hamburger-menu