jQuery的动画作品只是第一次

Question

HTML

<div class="label"> 
    <div class="label-outer annotation-multi"><!-- Stuff --></div> 

    <div class="select-word"> 
    <div class="select-content-front"> 
     <div class="select-content"> 
      <div class="select-content-main"> 
      <div id="select-word-4" class="select-word-link"><!-- Stuff --></div> 
      <div id="select-word-5" class="select-word-link"><!-- Stuff --></div> 
      </div> 
     </div> 
    </div> 
    </div> 

    <div id="select-4" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div> 
    <div id="select-5" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div> 

</div> 

JS

$('.label-outer.annotation-multi').click(function() { 

     //Open "select-word"/Close 

     if ($(this).parent().find('.select-word').css('visibility') == 'hidden') { 

      $(this).parent().find('.select-word').css("visibility", "visible").css({ 
      transformOrigin: '150px 0px' 
      }).transition({ 
      scale: 1, 
      easing: 'easeOutExpo', 
      duration: 600 
      }); 
      //Annotation SelectWord schließen 
     } else { 
      $(this).parent().find('.select-word').css({ 
      transformOrigin: '150px 0px' 
      }).transition({ 
      scale: 0, 
      easing: 'easeOutExpo', 
      duration: 600 
      }, function() { 
      $(this).parent().find('.select-word').removeAttr('style'); 
      }) 
     } 


     //Open Select-4 (Example) 
     $(this).parent().find('.select').css({ 
      transformOrigin: '150px 0px' 
     }).stop().transition({ 
      scale: 0, 
      easing: 'easeOutExpo', 
      duration: 600 
     }, function() { 
      $(this).parent().find('.select').css("visibility", "hidden"); 
     }) 

    }); 


    $('.select-word-link').click(function(){ 
     var selectID = this.id.replace('-word', ''); 



    //Close select-word 

        $(this).parent().parent().parent().css({ 
        transformOrigin: '150px 0px' 
        }).transition({ 
        scale: 0, 
        easing: 'easeOutExpo', 
        duration: 600 
        }, function() { 
        $(this).parent().parent().parent().removeAttr('style'); 
        }); 


     //Open Select 

      $("#"+selectID).css("visibility", "visible").css({ 
      transformOrigin: '150px 0px' 
      }).stop().transition({ 
      scale: 1, 
      easing: 'easeOutExpo', 
      duration: 600 
      }); 

    }); 


$(".select-close").click(function() { 


    $(this).parent().parent().parent().parent().parent().parent().find('.select').css({ 
    transformOrigin: '150px 0px' 
    }).stop().transition({ 
    scale: 0, 
    easing: 'easeOutExpo', 
    duration: 600 
    }, function() { 

    $(this).find('.select').removeAttr('style'); 
    }) 
}); 

所以，我有一个jquery动画的一个问题：

如果我点击类 “标签外”弹出“选择词”打开。然后我点击“select-word-link”类的链接上的“选择词”。 “选择词”弹出窗口关闭，然后打开“选择”弹出窗口。然后我点击“选择”关闭按钮并关闭。

一切似乎工作得很好，除了当我再次尝试点击“标签外”没有任何反应。当我检查铬时，它应用了打开的“选择字”弹出窗口的类和可见性，但它只是没有显示任何内容：/

我认为问题可能出在“$（”。select-close “）.click（function（）{”但我只是无法找到它

Answer 1

只需要替换所有的父函数：$（this）.parents（'。select-word'）像魅力一样工作。谢谢adeneo！