Question

我无法弄清楚为什么当高度使用％值时，slideToggle会导致2个面板在父div之外生长：

<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个面板在彼此之间滑动。

Answer 1

理解的关键是知道slideToggle正在改变元素上的CSS height属性。此外，您在面板上指定的高度为父级的100％。但是，你还有一个P标签，它在父母中没有分配空间。

由于高度定义无效而导致重叠元素的情况正在搞砸jQuery的计算。

此修复程序显示在此处：http://jsfiddle.net/DwTRQ/

将段落设置为具有绝对位置，或者只是从父面板中删除它。

哦，我还应该提一下，因为CSS盒子模型的工作方式，将元素设置为100％的高度或宽度并使用填充对你来说效果不佳。它将超越父母的界限。

Answer 2

我认为它的高度值是％。 300％的100％是300.因此，当panel1增长到100％，即300px时，panel2必须从父级中出来以增加高度。您应该以px为单位给出高度，使其按预期工作。

使用高度％时jQuery slideToggle问题

2 个答案: