jQuery slideToggle problem when using height %_问答_开发者

jQuery slideToggle problem when using height %

开发者 https://www.devze.com 2023-03-25 04:43 出处：网络

I can\'t figure out why slideToggle causes the 2 panels to grow outside of the parent div when height uses a % value:

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 1p开发者_如何学编程x #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.

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.

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.