jQuery SlideDown和Float issuse

當我向下滑動的對象的內容浮動時，我遇到了jQuery slideDown的問題。jQuery SlideDown和Float issuse

會發生什麼情況是div滑過內容的高度，然後'卡入'到適當的高度。

我認爲（只是一個理論），div是基於高度，如果裏面的內容沒有浮動，會滑落。例如，如果我有4個浮動項目，div似乎擴展兩倍，比當我有2個浮動項目時。

用clearfix hack包含浮點數的數量似乎可以解決任何問題。

我過去使用的解決方案（以及推薦的解決方案）是通過CSS隱藏它來設置項目的高度。這樣，slidedown知道要走多遠。

問題在於我嵌套使用滑動向下的面板。我無法事先設置父級的高度，因爲它將根據已擴展的嵌套隱藏面板進行計算。

我可以遞歸地調用設置所有我的切換面板的函數......找到最內層的嵌套塊，設置高度，摺疊我想要默認隱藏的那些，然後按照層次結構向上移動。但那會是一場不得不穿越很多的表演。

任何人都知道一種方法來解決這個浮動內容的slideDown，而不需要先通過CSS來固定高度，而無需先手動遍歷dom設置高度？

UPDATE：

示例代碼是在這裏：

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

（點擊頁面，看看它滑動）

這是基於我使用的是精確的風格和在特定的組合，你會看到這個問題。請注意，設置爲slideDown的DIV具有粉紅色背景。它會比內容更下滑，然後迅速回到適當的位置。

來源

2010-06-18 DA.

我無法重現該問題。請提供一些代碼。可正常工作：

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

$(function(){ 
    $('#test').hide(); 
    $(window).click(function(){ 
    $('#test').slideDown(); 
    }); 
});

來源

2010-06-18 17:36:07

嗯......你說得對！必須有我失蹤的另一個變量...我會繼續挖掘 – 2010-06-18 17:49:19

@Fred ...我嘗試了各種變化，但無法從頭開始複製它。我最終逐字複製了問題網站元素，然後問題又回來了。所以這是我的特定CSS的一些奇怪的組合。我在原始文章中添加了一個樣本鏈接。 – 2010-06-19 02:01:52

解決：

從y中取出我們

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

http://jsbin.com/ajoka/11

來源

2010-06-19 02:37:41 Starx

這確實解決了演示！唉，不是我們特定的標記。啊。太多因素！就我而言，我發現從浮動項中刪除'positon：relative'可以解決問題。問題是他們必須在某些情況下（當他們的內容被絕對定位時）定位。回到測試板... – 2010-06-19 03:25:13

@Da，你爲什麼不發佈你的整個代碼，我會看看它。 – Starx 2010-06-19 09:17:36

我只是碰到了同樣的問題來了，而閱讀這篇文章突然想起我已經有這個問題幾年前。

下面是一個解決方案，雖然不是最優的，但可以在大多數情況下完成工作。

將padding-bottom: 1px;添加到您的包裝中。在我的例子中，包裝器是動畫div的父代。

希望有所幫助。

來源

2011-10-22 10:04:31 jmlnik

我也面臨同樣的問題。兩個文件具有相同的HTML代碼，但其中一個顯示此問題。作爲一種解決方案我計算其與jQuery滑動div的高度：

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

然後我存儲它在一個變量中，並應用了slideDown效果之前該div再次施加它：

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

這個竅門解決了這個問題。

來源

2012-10-17 19:55:46

jQuery SlideDown和Float issuse

回答

相關問題