的jQuery的slideToggle問題使用高度％

時，我想不通爲什麼的slideToggle導致2個板成長高度時使用百分比值父DIV之外：的jQuery的slideToggle問題使用高度％

<html> 
<head> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".flip").click(function(){ 
    $(".panel").slideToggle(5000); 
    $(".panel2").slideToggle(5000); 
    }); 
}); 
</script> 

<style type="text/css"> 
div.parent 
{ 
height:300px; 
width:600px; 
background:red; 
} 
div.panel,p.flip,div.panel2 
{ 
width:100%; 
margin:0px; 
padding:5px; 
text-align:center; 
background:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
div.panel 
{ 
height:100%; 
display:none; 
} 
div.panel2 
{ 
height:100%; 
} 
</style> 
</head> 

<body> 
<div class="parent"> 
    <div class="panel"> 
     <p>Panel 1: Because time is valuable</p> 
    </div> 
    <div class="panel2"> 
     <p>Panel 2: Because time is valuable</p> 
    </div> 
    <p class="flip">Show Panel</p> 
</div> 

</body> 
</html>

然而，當我改變高度到一個固定的px值，行爲將按預期執行。基本上我想讓2個面板在彼此之間滑動。

來源

2011-08-04 Steve

如果你仍然想要答案，你可能想接受一些你的問題的答案。只是普遍的禮貌。 – Michael

我認爲它是因爲身高值的百分比。 300的100％是300.因此，當面板1增長到100％，即300px時，面板2必須從父面板出來以增加高度。您應該在px中給出高度以使其按預期工作。

來源

2011-08-04 22:39:13 ShankarSangoli

那麼我對使用％值的興趣是，在我的項目在家裏，我有一個父div設置爲特定的px值，該div的每個孩子都有％，並且這些孩子的每個孩子也都有％。等等等等。我認爲這是一個好主意，因爲如果我想相應地擴展網站，我只需要更改2 px值。我希望能夠保持這個想法，當我得到這個切換效果運行時，但它聽起來像我將不得不回到使用px值或寫一些使用animate（） – Steve

理解的關鍵是知道slideToggle正在改變元素上的CSS高度屬性。此外，您的面板上指定的高度爲父級的100％。但是，您也有一個P標籤，在其中沒有空間分配給它。

由於無效的高度定義導致重疊元素的這種情況正在搞砸jQuery的計算。

此修復程序如下所示：http://jsfiddle.net/DwTRQ/

設置段落有一個絕對位置，或者只是從父面板中刪除它。

哦，我還應該提到，由於CSS盒模型的工作原理，使用填充將元素設置爲高度或寬度的100％不適合您。它會超越父母的界限。

來源

2011-08-04 22:40:56

工作周圍瞭解，p標籤只是爲了識別每個div，並瞭解如何通過切換來影響內容。在我家裏的項目中，我打算在這張幻燈片中佔有大部分內容。下一步是弄清楚如何讓它左右滑動而不會扭曲任何內容。謝謝你的提示！ – Steve

Steve，如果您發現我的答案是準確的，請點擊左側旁邊的複選標記，以便它是綠色的。 –

的jQuery的slideToggle問題使用高度％

回答

相關問題