jQuery SlideToggle 使用高度%时出现问题
我不明白为什么当高度使用 % 值时，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 值时，行为会按预期执行。本质上我希望两个面板能够在彼此之间滑动。
I can't figure out why slideToggle causes the 2 panels to grow outside of the parent div when height uses a % value:
<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>
However, when I change the height to a fixed px value, the behavior performs as expected. Essentially I want the 2 panels to swipe between each other.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
理解的关键是要知道slideToggle 正在改变元素上的CSS 高度属性。此外，您在面板上指定的高度为父级的 100%。但是，其中还有一个 P 标记，它在父级中实际上没有分配给它的空间。
这种由于高度定义无效而导致元素重叠的情况会搞乱 jQuery 的计算。
此修复如下所示： http://jsfiddle.net/DwTRQ/
将段落设置为具有绝对位置，或者只是将其从父面板中删除。
哦，我还应该提到，由于 CSS 盒模型的工作原理，将元素设置为 100% 的高度或宽度并带有填充并不适合您。它将超越父母的界限。
The key to understanding is knowing that slideToggle is changing the CSS height attribute on the element. Additionally, you have a height specified on your panels as 100% of the parent. However, you also have a P tag in there which really has no space allocated to it in the parent.
This situation of having overlapping elements due to invalid height definitions is screwing up jQuery's calculations.
This fix is shown here: http://jsfiddle.net/DwTRQ/
Set the paragraph to have an absolute position, or just remove it from the parent panel.
Oh, and I should also mention that because of how the CSS box model works, having an element set to 100% of height or width with a padding won't work well for you. It'll scale beyond the parents boundaries.
我认为这是因为高度值（以百分比为单位）。 300 的 100% 是 300。因此，当 panel1 增长到 100% 即 300px 时，panel2 必须从父级中出来以增加高度。您应该以 px 为单位给出高度，以使其按预期工作。
I think its because of height value in %. 100% of 300 is 300. So when panel1 grows to 100% i.e 300px then panel2 has to come out of the parent to increase the height. You should give the height in px to make it work as expected.