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

请记住，简洁是完美的：）

动画显示父隐藏的高度选择选项

1 个答案: