JS、CSS 使用链接添加/删除类来打开/关闭 Div

如何解决JS、CSS 使用链接添加/删除类来打开/关闭 Div

我一直致力于在到达航点时向左和向右滑动 div，效果很好。但是，我想添加一个链接，使 div 在单击时左右滑动，但不幸的是，我对 JavaScript 的了解不够，无法弄清楚。如果有人能帮我一把，我将不胜感激。我想要的功能是，无论用户在页面上多远或多远，他们都可以单击按钮来切换 div，无论他们是否经过了航点。

        $(function() {
            $('#targetPoint').waypoint(function(direction) {
                console.log('waypoint reached!');
                if (direction === 'down') {
                    $("#smooth-menu").addClass("slideLeft");
                    $("#smooth-menu").removeClass("slideRight");
                } else if (direction === 'up') {  
                    $("#smooth-menu").addClass("slideRight");
                    $("#smooth-menu").removeClass("slideLeft");
                }
            },{ offset: "0%" })
        });
        
        $('.main_header_toggle').on('click',function(){
            $('.active').removeClass('slideLeft');
            $('.active').addClass('slideRight');
        });
        
        $('.main_header_toggle_close').on('click',function(){
            $('.active').removeClass('slideRight');
            $('.active').addClass('slideLeft');
        });

.header {
  position: relative;
}

#smooth-menu {
  position: fixed;
  top:0;
  left:0;
  background:black;
  height: 100vh;
  min-width:400px;
  border-top-right-radius: 150px 350px;
  border-bottom-right-radius: 150px 350px;
}

.fal {
    color:yellow;
    font-size:48px;
}

#open {
  position: relative;
  top:50%;
  left:350px;
}

#toggleClose {
  -webkit-animation: slide-left .5s cubic-bezier(0.250,0.460,0.450,0.940) both;
          animation: slide-left .5s cubic-bezier(0.250,0.940) both;
}

.forced_menu #smooth-menu .main_header_toggle_close{-webkit-transform:translateY(-50%) scale3d(1,1,1);transform:translateY(-50%) scale3d(1,1);opacity:1}
.forced_menu #smooth-menu .main_header_toggle_close:hover{color:#fff;-webkit-transform:translateY(-50%) scale3d(1.2,1.2,1);transform:translateY(-50%) scale3d(1.2,1)}
.forced_menu .hidden-when-menu-forced{opacity:0}
.forced_menu #default_layout #sidebar{opacity:0;-webkit-transition:0.3s 0.4s opacity ease;-o-transition:0.3s 0.4s opacity ease;transition:0.3s 0.4s opacity ease}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250,0.940) both;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250,0.940) both;
          animation: slide-right .5s cubic-bezier(0.250,0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

<!DOCTYPE html>
<html>
<head>
  <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script type='text/javascript' src='https://kit.fontawesome.com/37409d6418.js' id='fa5-kit-js' defer></script>
<link href="styles2.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="header">
        <div id="smooth-menu">
            <div id="open">
                <a class="main_header_toggle" href="#"><i class="fal fa-chevron-right"></i><span class="sr-only">Navigation Toggle</span></a>
                <a class="main_header_toggle_close" href="#" aria-label="Close Navigation Toggle"><i class="fal fa-chevron-left"></i><span class="sr-only">Navigation Toggle Close</span></a>
            </div>
        </div>
    </header>
    <div id="targetPoint" style="color: red;">Run the Slide Animation!</div>
    <div style="min-height:4000px;"></div>


    

</body>
</html>

JS、CSS 使用链接添加/删除类来打开/关闭 Div

如何解决JS、CSS 使用链接添加/删除类来打开/关闭 Div

相关推荐