Question

我们心爱的Internet Explorer 7中出现此问题：

我有一个项目列表，每个项目都有一个隐藏的子div。当用户单击任何列表项中的“展开”按钮时，隐藏的div将向下扩展并将所有内容推到更低的位置。

这样可以在FF，Chrome，IE8中使用 - 但IE7不会扩展父元素及其子元素。这是显而易见的，因为最顶层的父容器在最底部有一个绝对定位的图像（是......圆角） - 当内容扩展时不会被推下。

我猜这是因为绝对定位...只是想知道我是否应该尝试在jQuery中编写一些巨大的解决方法（假设我能够），或者如果这是一个已知问题某种。

我的HTML：

<div id="container">
   <ul>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
      <li>Click here to expand
          <div class="hide"></div>
      </li>
   </ul>

   <div id="containerbottom"></div>
</div>

CSS：

#container { position:relative; }
#container #containerbottom { position:absolute; bottom:0px; left:0px; }

jQuery几乎就是你的日常幻灯片功能：

$('ul li').click(function() {
   $(this).children('.hide').slideDown(200);
});

有什么想法吗？

Answer 1

经过多次测试后，我发现了这一点：

$(document).ready(function(){

   $('ul li').click(function() {

     $(this).children('.hide').slideDown(200, function(){

       if($.browser.msie && $.browser.version == '7.0' ){
          $('#containerbottom').css('top',$(this).closest('ul').height()+'px');
       }

     });

   });

})

它不是那么好但是解决了问题......

jQuery slideDown：父元素不扩展？

1 个答案: