單擊 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});
        
    });

出於隱私目的，我刪除了 src。 每當我想關閉下拉菜單時，菜單關閉功能都不起作用。 當我點擊菜單時，它會打開但不會關閉。

Answer 1

因為我不確定 your.menu_close class 適用於什么 html 元素。 我創建的這個片段確實適合您的評論。

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