单击 function 不适用于下拉菜单（JavaScript）

Question

(".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.

Answer 1

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>

Answer 2

$(".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 }); });