当前位置： 文江博客话题详情

jQuery SlideDown 和 Float 问题

发布于 2024-09-06 04:33:56 字数 760 浏览 12 评论 0原文

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

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

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

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

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

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

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

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

更新：

示例代码在这里：

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

（点击页面看到它滑动）

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

原文

I'm having an issue with jQuery slideDown when the contents of the object I'm sliding down is floated.

What happens is that that the div slides down WAY past the height of the contents, and then 'snaps' to the proper height.

I think (merely a theory) that the div is sliding down based on the height it would be if the contents inside weren't floated. For instance, if I have 4 floated items, the div seems to expand twice as far than when I have 2 floated items within.

No amount of containing the floats with clearfix hacks seems to fix anything.

The solution I've used in the past (and one that is recommended) is to set the height of item via CSS BEFORE hiding it. That way, slidedown knows how far to go.

The catch is that I'm nesting panels that use slide down. I can't set the height of the parent before hand as it would be calculated based on the nested hidden panels being expanded already.

I could recursively call that function that sets up all my toggle panels...find the innermost nested ones, set the height, collapse the ones I want hidden by default, and then move my way up the hierarchy. But that'd be a performance hit having to traverse so much.

Anyone know of a way to fix this slideDown of floated content without fixing the height via CSS before hand without having to traverse the dom setting heights manually first?

UPDATE:

sample code is here:

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

(click the page to see it sliding)

This is based on the exact styles I am using and in that particular combination, you'll see the issue. Note the DIV being set to slideDown has a pink background. It will slide down FURTHER than its contents and then quickly snap back into the proper place.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

不及他 2024-09-13 04:33:57

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

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

I can't reproduce the problem. Please provide some code.
This works as expected:

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();
  });
});
回复 原文
心的位置 2024-09-13 04:33:57

已解决：

中删除 margin-bottom:10px;

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

从http://jsbin.com/ 阿约卡/11

solved:

remove margin-bottom:10px; from your

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

http://jsbin.com/ajoka/11

回复 原文
千鲤 2024-09-13 04:33:57

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

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

将 padding-bottom: 1px; 添加到您的包装器中。就我而言，包装器是动画 div 的父级。

希望有帮助。

I just came across the same issue, and while reading this post suddenly remembered I already had this issue years ago.

Here's a solution that, though not optimal, gets the job done for most situations.

Add padding-bottom: 1px; to your wrapper. In my case, the wrapper is the parent to the animated div.

Hope that helps.

回复 原文
夏九 2024-09-13 04:33:57

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

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

然后我将其存储在变量中，并再次应用它在应用 SlideDown 效果之前的 div：

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

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

I was also facing the same issue. Two files having same HTML code but one of it was showing this issue. As a solution I calculated the height of the div which was sliding with jQuery:

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

Then I stored it in a variable, and again applied it that div before applying the slideDown effect:

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

This trick solved the issue.

回复 原文
~没有更多了~

关于作者

昔梦

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文