Animation de la hauteur des peaux parentales Sélectionnez les options

Question

Lorsque je me concentre sur une zone de sélection, l'info-bulle masquée doit apparaître. Lorsque je clique sur la case de sélection, l'animation démarre mais la liste des options est masquée. Comment je contourne cela?

<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

Je pense que vous abordez le problème/balisage incorrect. Essayez de segmenter un peu la structure pour ne pas animer le parent. Par exemple:

HTML:

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

Javascript:

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

Rappelez-vous, la simplicité est la perfection :)