的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问题使用高度％

回答

相关问题