点击功能不适用于下拉菜单（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

由于我不确定您的 .menu_close 类应用于哪个 html 元素。我创建的这个 sn-p 确实适合您的审核。

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