下面的代码运行一个 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>
最佳答案
我建议不要使用 % 值,问题是当面板缩小时高度仍然占 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>
关于jquery - jQuery SlideToggle 的动画通过添加高度(%)改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45862637/