On click function not working for dropdown menu (JavaScript)

Viewed 77
(".menu_nav").click(function(){
        
        gsap.to(".hiddenmenu", .5, { opacity:1, height:"100%"});
        $(".menu_nav img").attr("src", "...").addClass("menu_close");
        $(".menu_nav").css({ 'color': 'white'});
        gsap.to(".center", .4, { opacity:1, visibility:"visible", delay:.6});
        
    });
    
    
     $(".menu_close").click(function(){
        
        gsap.to(".hiddenmenu", .5, { opacity:0, height:"0%"});
        $(".menu_nav img").attr("src", "...");
        $(".menu_nav").css({ 'color': 'white'});
        gsap.to(".center", .4, { opacity:0, visibility:"hidden", delay:.6});
        
    });

For privacy purposes I removed the src. Whenever I want to close the drop down menu the menu close functionality does not work. When I hit menu it does open but does not close.

2 Answers

Since I am not sure what html element your .menu_close class is applied to. This snippet I created does work for your review.

    
    $( document ).ready(function() {
  // Handler for .ready() called.
   $(".menu_close").click(function(){
        
      alert('Closed!');
        
    });
});
.menu_close{}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href class="menu_close">Close</a>
</div>

$(".menu_nav").click(function() {
  gsap.to(".hiddenmenu", .5, {
    opacity: 1,
    height: "100%"
  });
  
  $(".menu_nav img").attr("src", "...");
  $(".menu_nav img").addClass("menu_close");
  $(".menu_nav").css({
    'color': 'white'
  });
  
  gsap.to(".center", .4, {
    opacity: 1,
    visibility: "visible",
    delay: .6
  });
});


$(".menu_close").click(function() {
  gsap.to(".hiddenmenu", .5, {
    opacity: 0,
    height: "0%"
  });
  
  $(".menu_nav img").attr("src", "...");
  $(".menu_nav img").addClass("menu_close");
  $(".menu_nav").css({
    'color': 'white'
  });
  
  gsap.to(".center", .4, {
    opacity: 0,
    visibility: "hidden",
    delay: .6
  });
});
Related