設置家長隱藏高度的動畫選擇選項

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> 

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

記住，簡單是完美:)