2

当我向下滑动的对象的内容浮动时，我遇到了 jQuery slideDown 的问题。

发生的情况是 div 向下滑动超过内容的高度，然后“捕捉”到适当的高度。

我认为（仅仅是一个理论）div 是根据高度向下滑动的，如果里面的内容没有浮动的话。例如，如果我有 4 个浮动项目，则 div 的扩展距离似乎比我有 2 个浮动项目时的两倍。

使用 clearfix hacks 包含任何浮点数似乎都无法解决任何问题。

我过去使用的解决方案（也是推荐的解决方案）是在隐藏项目之前通过 CSS 设置项目的高度。这样，slidedown 就知道要走多远了。

问题是我正在嵌套使用向下滑动的面板。我不能事先设置父级的高度，因为它是根据已经展开的嵌套隐藏面板计算的。

我可以递归调用该函数来设置我的所有切换面板......找到最里面的嵌套面板，设置高度，折叠我默认隐藏的那些，然后向上移动层次结构。但这将是一个性能打击，不得不遍历这么多。

任何人都知道一种方法来修复浮动内容的此幻灯片，而无需事先通过 CSS 固定高度，而无需先手动遍历 dom 设置高度？

更新：

示例代码在这里：

http://jsbin.com/ajoka/10/

（点击页面看它滑动）

这是基于我正在使用的确切样式，并且在该特定组合中，您会看到问题。请注意，设置为 slideDown 的 DIV 具有粉红色背景。它会向下滑动到比其内容更远的位置，然后快速弹回正确的位置。

4

4 回答 4

1

解决了：

从margin-bottom:10px;您的

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11

于 2010-06-19T02:37:41.970 回答
1

我无法重现该问题。请提供一些代码。这按预期工作：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="assets/js/application.js" type="text/javascript"></script>
</head>
<body>
  <div id="test">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</body>
</html>

CSS

#test div { width: 200px; height: 200px; float: left; outline: 1px solid #000; }

JS

$(function(){
  $('#test').hide();
  $(window).click(function(){
    $('#test').slideDown();
  });
});
于 2010-06-18T17:36:07.317 回答
0

我也面临同样的问题。两个文件具有相同的 HTML 代码，但其中一个文件显示了此问题。作为解决方案，我计算了使用 jQuery 滑动的 div 的高度：

var somevar=$('#contentBody').outerHeight();

然后我将它存储在一个变量中，并在应用 slideDown 效果之前再次应用它：

$('#contentBody').height(somevar);

这个技巧解决了这个问题。

于 2012-10-17T19:55:46.927 回答
0

我刚刚遇到了同样的问题，在阅读这篇文章时突然想起我几年前就已经遇到过这个问题了。

这是一个解决方案，虽然不是最佳的，但可以在大多数情况下完成工作。

添加padding-bottom: 1px;到你的包装。在我的例子中，包装器是动画 div 的父级。

希望有帮助。

于 2011-10-22T10:04:31.967 回答