jQuery SlideDown 和 Float 问题

标签 jquery css-float slidedown

当我向下滑动的对象的内容 float 时,我遇到了 jQuery SlideDown 问题。

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

我认为(仅是一个理论)div 会根据内部内容不 float 时的高度向下滑动。例如,如果我有 4 个 float 项目,则 div 似乎会比我有 2 个 float 项目时扩大两倍。

无论用clearfix hacks包含多少 float 似乎都无法解决任何问题。

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

问题是我正在嵌套使用向下滑动的面板。我无法预先设置父级的高度,因为它将根据已经展开的嵌套隐藏面板进行计算。

我可以递归调用该函数来设置我的所有切换面板...找到最里面的嵌套面板,设置高度,折叠我想要默认隐藏的面板,然后沿着层次结构向上移动。但如果要遍历这么多,性能就会受到影响。

有人知道一种方法来修复 float 内容的滑动,而无需事先通过 CSS 固定高度,而不必先手动遍历 dom 设置高度吗?

更新:

示例代码在这里:

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

(点击页面即可看到滑动)

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

最佳答案

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

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

关于jQuery SlideDown 和 Float 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3071653/

相关文章:

css 菜单在空格后中断

javascript - 使用 jQuery 的 slideDown 显示 : inline-block

jquery - 日期时间选择器 UI 无法正常工作

html - 如何在水平居中元素的左侧或右侧 float 元素?

javascript - css,使用旋转和jquery到初始位置

html - 中心 2 个 float 图像

jquery - 父级 slideDown 中的子级 slideDown 溢出父级

jquery - 如何将两个不同元素的 jQuery 动画 SlideUp 和 SlideDown 链接在一起

javascript - 如何使用 jQuery 创建具有唯一高度的数组和 div?

jquery - 链接并获取输入的值