jQuery slideToggle проблема при использовании высоты% - PullRequest
Новая
       31

jQuery slideToggle проблема при использовании высоты%

1 голос
/ 05 августа 2011

Я не могу понять, почему 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 панели проводились между собой.

Ответы [ 2 ]

2 голосов
/ 05 августа 2011

Ключом к пониманию является знание того, что slideToggle изменяет атрибут CSS height для элемента.Кроме того, у вас есть высота, указанная на ваших панелях как 100% родительского.Тем не менее, у вас также есть тег P, у которого действительно нет места, выделенного для него в родительском элементе.

Эта ситуация с перекрывающимися элементами из-за неверных определений высоты испортила вычисления jQuery.* Это исправление показано здесь: http://jsfiddle.net/DwTRQ/

Установите для абзаца абсолютную позицию или просто удалите его из родительской панели.

О, и я должен также упомянуть, что из-закак работает блочная CSS-модель, если для элемента установить 100% высоты или ширины с отступом, то это не сработает.Это будет выходить за границы родителей.

0 голосов
/ 05 августа 2011

Я думаю, что это из-за значения высоты в%. 100% от 300 - это 300. Поэтому, когда panel1 увеличивается до 100%, то есть 300px, тогда panel2 должна выходить из родительского элемента, чтобы увеличить высоту. Вы должны указать высоту в пикселях, чтобы она работала как положено.

...