부모 숨기기 높이 애니메이션 옵션 선택

Question

선택 상자에 집중하면 숨겨진 툴팁이 나타나기를 원합니다. 선택 상자를 클릭하면 애니메이션이 시작되지만 옵션 목록은 숨겨집니다. 나는 이것을 어떻게 얻을 수 있습니까?

<style> 
.showme {display:none;} 
li {height:25px;background:red; } 
select{z-index:100;} 
p{margin:0px;padding:0px;} 
</style> 
<script type="application/javascript"> 
$(document).ready(function() { 

    $("select") 
     .focus(function(){ 
      var myParent = $(this).parent("li"); 
      var myInfo = $(this).siblings(".showme"); 

      $(myParent).data("myoldheight", $(myParent).height()); 

      $(myInfo).css("display","block");        
      var totalHeight = $(myParent).height() + $(myInfo).height(); 

      $(myParent).animate({ 
       "height": totalHeight + "px"        
      },3000,function() {console.log("animated");})    
     }) 

     .blur(function() { 

      $($(this).parent("li")).animate({ 
       "height": $(this).parent("li").data("myoldheight") + "px"        
      },500) 

      $(this).siblings(".showme").hide(); 
     }) 
     }) 
</script> 
<form> 
<ul> 
<li> 
<label for="test">Test</label> 
<select id="test" name="test"> 
    <option value=""></option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
</select> 
<p class="showme">This is my text</p>  
</li> 
</ul> 
</form> 

Answer 1

문제/마크 업 오류가 다가오고 있다고 생각합니다. 부모에게 애니메이션을 적용하지 않도록 구조를 조금 분할 해보십시오.

HTML :

<select id="selSomething"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
<div class="tooltip">More information!</div> 

자바 스크립트 : 예를 들어

$(document).ready(function() { 
     $('#selSomething').focus(function() { 
      var $tip = $(this).next('.tooltip'); 
      if($tip.length > 0) { 
      $tip.slideDown(); 
      } 
     }); 
     $('#selSomething').blur(function() { 
      var $tip = $(this).next('.tooltip'); 
      if($tip.length > 0) { 
      $tip.slideUp(); 
      } 
     }) 
    }); 

가 기억 단순 완벽 :)