当我向下滑动的对象的内容 float 时,我遇到了 jQuery SlideDown 问题。
发生的情况是,div 向下滑动超过内容的高度,然后“捕捉”到正确的高度。
我认为(仅是一个理论)div 会根据内部内容不 float 时的高度向下滑动。例如,如果我有 4 个 float 项目,则 div 似乎会比我有 2 个 float 项目时扩大两倍。
无论用clearfix hacks包含多少 float 似乎都无法解决任何问题。
我过去使用的解决方案(也是推荐的解决方案)是在隐藏项目之前通过 CSS 设置项目的高度。这样,slidedown 就知道要走多远。
问题是我正在嵌套使用向下滑动的面板。我无法预先设置父级的高度,因为它将根据已经展开的嵌套隐藏面板进行计算。
我可以递归调用该函数来设置我的所有切换面板...找到最里面的嵌套面板,设置高度,折叠我想要默认隐藏的面板,然后沿着层次结构向上移动。但如果要遍历这么多,性能就会受到影响。
有人知道一种方法来修复 float 内容的滑动,而无需事先通过 CSS 固定高度,而不必先手动遍历 dom 设置高度吗?
更新:
示例代码在这里:
(点击页面即可看到滑动)
这是基于我正在使用的确切样式,在该特定组合中,您会看到问题。请注意,设置为 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/