jquery - jQuery SlideToggle 的动画通过添加高度(%)改变

Question

下面的代码运行一个 jQuery SlideToggle 菜单。单击 <container> 后<panel>被滚出。到目前为止一切正常。

但是，现在我想分配一个亲戚 height: 25%;到 <div>在<panel>里面.
(请参阅下面我的 CSS 中的注释)
一旦我执行此操作，SlideToggle 的动画 更改 并滚动<panel>不同的。

如何添加亲戚 height: 25%;所以动画保持与没有相对高度的相同？

你也可以找到我的代码here

$(document).ready(function () {
    $(".container").on('click', function () {
        $(this).next('.panel').slideToggle(500);
    });
});

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.container {
  height: 30%;
  width: 30%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: orange;
}

.panel {
  height: 30%;
  width: 70%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.panel div {
  height: 25%; /* Why does the animation change by adding this height? */
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">Menu</div>	
    
<div class="panel">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>

Answer 1

我建议不要使用 % 值，问题是当面板缩小时高度仍然占 25%，这就是为什么你看到这种效果，如果你放置一个静态高度是正确的..

$(document).ready(function () {
    $(".container").on('click', function () {
        $(this).next('.panel').slideToggle(500);
    });
});

html { 
height: 100%; 
}

body { 
height: 100%; 
}

.container {
  height: 115px;
  width: 30%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: orange;
}

.panel {
  height: 115px;
  width: 70%;
  float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue;
}

.panel div {/* Why does the animation change by adding this height? */
    /*height:25%;*/
    height: 28.4px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">Menu</div>	
    
<div class="panel">
  <div> 1.0 Menu </div>
  <div> 2.0 Menu </div>
  <div> 3.0 Menu </div>
  <div> 4.0 Menu </div>
</div>