父级的动画高度隐藏选择选项

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

记住，简单就是完美:)